:root {
  color-scheme: dark;
  --bg: #030714;
  --panel: rgba(9, 22, 39, 0.76);
  --panel-soft: rgba(13, 30, 51, 0.72);
  --panel-strong: rgba(8, 18, 33, 0.92);
  --text: #edf7ff;
  --muted: #92a9bd;
  --dim: #6f879b;
  --line: rgba(136, 203, 247, 0.16);
  --line-strong: rgba(150, 217, 255, 0.34);
  --accent: #8bd8ff;
  --accent-strong: #ccefff;
  --violet: #9b8cff;
  --button: rgba(17, 43, 70, 0.72);
  --button-hover: rgba(30, 74, 112, 0.78);
  --shadow: 0 20px 58px rgba(0, 0, 0, 0.38);
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 14% 4%, rgba(58, 130, 211, 0.25), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(112, 92, 220, 0.18), transparent 30rem),
    radial-gradient(circle at 52% 105%, rgba(34, 118, 165, 0.14), transparent 34rem),
    linear-gradient(145deg, #02050f 0%, #071526 54%, #030713 100%);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(139, 216, 255, 0.07), transparent 46%),
    radial-gradient(ellipse at 82% 100%, rgba(112, 92, 220, 0.06), transparent 52%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 82%);
}

.ambient-bubbles {
  --vh-unit: 1vh;
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

@supports (height: 100dvh) {
  .ambient-bubbles {
    height: 100dvh;
    --vh-unit: 1dvh;
  }
}

.ambient-bubble {
  --size: 24px;
  --x: 50%;
  --delay: 0s;
  --duration: 36s;
  --drift: 0px;
  --peak: 0.42;
  --scale-start: 0.65;
  --scale-end: 1.12;
  --edge: 0.24;
  --glow: 0.14;
  --highlight-x: 30%;
  --highlight-y: 28%;
  --highlight-alpha: 0.55;

  position: absolute;
  left: var(--x);
  bottom: calc(-6 * var(--vh-unit));
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0;
  background: transparent;
  border: 1px solid rgba(186, 232, 255, var(--edge));
  box-shadow: 0 0 calc(var(--size) * 0.55) rgba(120, 196, 255, var(--glow));
  animation: ambient-bubble-rise var(--duration) linear infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

.ambient-bubble::before {
  content: "";
  position: absolute;
  left: var(--highlight-x);
  top: var(--highlight-y);
  width: 24%;
  height: 24%;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, var(--highlight-alpha));
  box-shadow: 0 0 8px rgba(220, 245, 255, 0.35);
  transform: translate(-42%, -42%);
}

.ambient-bubble--1 {
  --x: 6%;
  --size: 22px;
  --duration: 32s;
  --delay: 0s;
  --drift: 12px;
  --peak: 0.4;
  --scale-start: 0.62;
  --scale-end: 1.08;
  --edge: 0.22;
  --glow: 0.12;
  --highlight-x: 28%;
  --highlight-y: 24%;
}

.ambient-bubble--2 {
  --x: 19%;
  --size: 38px;
  --duration: 48s;
  --delay: -5s;
  --drift: -14px;
  --peak: 0.5;
  --scale-start: 0.58;
  --scale-end: 1.2;
  --edge: 0.3;
  --glow: 0.18;
  --highlight-x: 72%;
  --highlight-y: 22%;
  --highlight-alpha: 0.62;
}

.ambient-bubble--3 {
  --x: 34%;
  --size: 18px;
  --duration: 28s;
  --delay: -11s;
  --drift: 8px;
  --peak: 0.36;
  --scale-start: 0.68;
  --scale-end: 1.05;
  --edge: 0.2;
  --glow: 0.1;
  --highlight-x: 38%;
  --highlight-y: 18%;
  --highlight-alpha: 0.48;
}

.ambient-bubble--4 {
  --x: 47%;
  --size: 30px;
  --duration: 40s;
  --delay: -17s;
  --drift: -10px;
  --peak: 0.44;
  --scale-start: 0.6;
  --scale-end: 1.15;
  --edge: 0.26;
  --glow: 0.15;
  --highlight-x: 66%;
  --highlight-y: 30%;
}

.ambient-bubble--5 {
  --x: 61%;
  --size: 44px;
  --duration: 52s;
  --delay: -23s;
  --drift: 16px;
  --peak: 0.52;
  --scale-start: 0.55;
  --scale-end: 1.22;
  --edge: 0.32;
  --glow: 0.2;
  --highlight-x: 34%;
  --highlight-y: 26%;
  --highlight-alpha: 0.65;
}

.ambient-bubble--6 {
  --x: 74%;
  --size: 20px;
  --duration: 30s;
  --delay: -8s;
  --drift: -7px;
  --peak: 0.38;
  --scale-start: 0.66;
  --scale-end: 1.1;
  --edge: 0.21;
  --glow: 0.11;
  --highlight-x: 58%;
  --highlight-y: 20%;
}

.ambient-bubble--7 {
  --x: 12%;
  --size: 26px;
  --duration: 44s;
  --delay: -14s;
  --drift: 10px;
  --peak: 0.42;
  --scale-start: 0.64;
  --scale-end: 1.14;
  --edge: 0.25;
  --glow: 0.14;
  --highlight-x: 24%;
  --highlight-y: 32%;
}

.ambient-bubble--8 {
  --x: 86%;
  --size: 16px;
  --duration: 29s;
  --delay: -20s;
  --drift: -11px;
  --peak: 0.35;
  --scale-start: 0.7;
  --scale-end: 1.06;
  --edge: 0.19;
  --glow: 0.09;
  --highlight-x: 70%;
  --highlight-y: 16%;
  --highlight-alpha: 0.45;
}

.ambient-bubble--9 {
  --x: 28%;
  --size: 32px;
  --duration: 46s;
  --delay: -26s;
  --drift: 13px;
  --peak: 0.46;
  --scale-start: 0.59;
  --scale-end: 1.18;
  --edge: 0.28;
  --glow: 0.16;
  --highlight-x: 48%;
  --highlight-y: 22%;
}

.ambient-bubble--10 {
  --x: 53%;
  --size: 36px;
  --duration: 50s;
  --delay: -12s;
  --drift: -9px;
  --peak: 0.48;
  --scale-start: 0.57;
  --scale-end: 1.2;
  --edge: 0.29;
  --glow: 0.17;
  --highlight-x: 76%;
  --highlight-y: 28%;
  --highlight-alpha: 0.6;
}

.ambient-bubble--11 {
  --x: 68%;
  --size: 24px;
  --duration: 35s;
  --delay: -31s;
  --drift: 7px;
  --peak: 0.41;
  --scale-start: 0.63;
  --scale-end: 1.11;
  --edge: 0.23;
  --glow: 0.13;
  --highlight-x: 32%;
  --highlight-y: 34%;
}

.ambient-bubble--12 {
  --x: 92%;
  --size: 28px;
  --duration: 42s;
  --delay: -19s;
  --drift: -13px;
  --peak: 0.43;
  --scale-start: 0.61;
  --scale-end: 1.16;
  --edge: 0.27;
  --glow: 0.15;
  --highlight-x: 62%;
  --highlight-y: 18%;
}

@keyframes ambient-bubble-rise {
  0% {
    transform: translate3d(0, 0, 0) scale(var(--scale-start));
    opacity: 0;
  }

  10% {
    opacity: calc(var(--peak) * 0.55);
  }

  22% {
    opacity: var(--peak);
  }

  72% {
    opacity: calc(var(--peak) * 0.82);
  }

  100% {
    transform: translate3d(var(--drift), calc(-122 * var(--vh-unit)), 0) scale(var(--scale-end));
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .ambient-bubble--1 { --peak: 0.46; }
  .ambient-bubble--2 { --peak: 0.56; }
  .ambient-bubble--3 { --peak: 0.42; }
  .ambient-bubble--4 { --peak: 0.5; }
  .ambient-bubble--5 { --peak: 0.58; }
  .ambient-bubble--6 { --peak: 0.44; }
  .ambient-bubble--7 { --peak: 0.48; }
  .ambient-bubble--8 { --peak: 0.4; }
  .ambient-bubble--9 { --peak: 0.52; }
  .ambient-bubble--10 { --peak: 0.54; }
  .ambient-bubble--11 { --peak: 0.47; }
  .ambient-bubble--12 { --peak: 0.49; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-bubble {
    animation: none;
    opacity: calc(var(--peak) * 0.65);
    bottom: auto;
    top: var(--rest-y, 72%);
    transform: scale(1);
  }

  .ambient-bubble--1 { --rest-y: 82%; }
  .ambient-bubble--2 { --rest-y: 68%; }
  .ambient-bubble--3 { --rest-y: 88%; }
  .ambient-bubble--4 { --rest-y: 62%; }
  .ambient-bubble--5 { --rest-y: 74%; }
  .ambient-bubble--6 { --rest-y: 86%; }
  .ambient-bubble--7 { --rest-y: 78%; }
  .ambient-bubble--8 { --rest-y: 90%; }
  .ambient-bubble--9 { --rest-y: 70%; }
  .ambient-bubble--10 { --rest-y: 64%; }
  .ambient-bubble--11 { --rest-y: 80%; }
  .ambient-bubble--12 { --rest-y: 72%; }
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

button,
.player-actions a {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--button);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

@media (hover: hover) and (pointer: fine) {
  button:hover,
  .player-actions a:hover {
    background: var(--button-hover);
    border-color: var(--line-strong);
  }
}

.app-shell {
  --mini-player-reserve: calc(132px + env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 2;
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 30px 0 var(--mini-player-reserve);
}

.hero {
  display: grid;
  gap: 14px;
  margin-bottom: 8px;
  padding: 0;
}

.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.hero-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.hero-line {
  margin: 0;
  color: var(--text);
  font-size: clamp(22px, 4.8vw, 30px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.01em;
}

.hero-subline {
  margin: 0;
  color: rgba(199, 237, 255, 0.84);
  font-size: clamp(15px, 3.5vw, 17px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.hero-avatar {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  width: clamp(72px, 16vw, 104px);
  aspect-ratio: 1;
  border: 1px solid rgba(176, 229, 255, 0.42);
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 30px rgba(139, 216, 255, 0.2),
    0 0 48px rgba(155, 140, 255, 0.12);
}

.hero-avatar::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 140, 255, 0.22), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
  z-index: -1;
}

.hero-avatar-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.hero-search {
  position: relative;
}

.eyebrow,
.section-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0;
  text-shadow: 0 0 18px rgba(139, 216, 255, 0.34);
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 34px;
  line-height: 1.2;
}

h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.channels-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.channels-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 0 10px rgba(139, 216, 255, 0.3);
}

.section-head--channels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-head--channels .channels-title {
  min-width: 0;
}

.language-toggle {
  flex: 0 0 auto;
  min-height: 24px;
  max-width: 96px;
  margin-right: 14px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(165, 220, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) and (pointer: fine) {
  .language-toggle:hover {
    background: transparent;
    color: var(--accent-strong);
    box-shadow: none;
    transform: none;
    outline: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

.language-toggle:focus-visible {
  background: transparent;
  color: var(--accent-strong);
  box-shadow: none;
  transform: none;
  outline: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

#languageToggle.language-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
}

#languageToggle.language-toggle:focus,
#languageToggle.language-toggle:focus-visible,
#languageToggle.language-toggle[aria-pressed="true"] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}

.subtitle,
.muted-text {
  margin: 0;
  color: var(--muted);
}

.search-box {
  position: relative;
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: rgba(174, 201, 220, 0.96);
  pointer-events: none;
  transform: translateY(-50%);
}

.search-box input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(165, 214, 255, 0.26);
  border-radius: 12px;
  padding: 10px 46px 10px 42px;
  background: rgba(9, 24, 48, 0.52);
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 8, 18, 0.18);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.search-box input::placeholder {
  color: rgba(160, 188, 211, 0.84);
}

.search-box input:focus {
  border-color: rgba(186, 228, 255, 0.48);
  background: rgba(12, 30, 58, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 8, 18, 0.2);
}

@media (max-width: 820px) {
  .search-box input {
    min-height: 46px;
    padding: 10px 46px 10px 42px;
    font-size: 16px;
    line-height: 1.25;
    background: rgba(12, 30, 58, 0.65);
    border-color: rgba(170, 218, 255, 0.36);
  }

  .search-box input::placeholder {
    color: rgba(162, 188, 210, 0.94);
  }

  .search-box input:focus {
    background: rgba(14, 34, 64, 0.7);
    border-color: rgba(190, 232, 255, 0.5);
  }
}

.clear-search {
  position: absolute;
  right: 8px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0; /* 去掉全局按钮的胶囊边框和底色，只留 × 图标 */
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  transform: translateY(-50%);
}

.view-section {
  margin-top: 22px;
}

.hidden {
  display: none !important;
}

.section-head,
.list-toolbar,
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.drawer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.category-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 98px;
  padding: 14px;
  text-align: left;
  border: 1px solid rgba(140, 200, 255, 0.19);
  border-radius: 9px;
  background: rgba(139, 216, 255, 0.025);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

@media (hover: hover) and (pointer: fine) {
  .category-card:hover {
    background: rgba(139, 216, 255, 0.05);
    border-color: rgba(155, 210, 255, 0.32);
    transform: none;
    outline: none;
    box-shadow: none;
  }
}

.category-card:active,
.category-card:focus,
.category-card:focus-visible {
  background: rgba(139, 216, 255, 0.05);
  border-color: rgba(155, 210, 255, 0.32);
  transform: none;
  outline: none;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) {
    .category-card:hover {
      background: rgba(139, 216, 255, 0.06);
      border-color: rgba(165, 220, 255, 0.38);
      box-shadow: 0 0 20px rgba(139, 216, 255, 0.1);
    }
  }
}

.category-card:active,
.category-card:focus-visible {
  background: rgba(139, 216, 255, 0.08);
  border-color: rgba(175, 228, 255, 0.42);
  box-shadow: 0 0 16px rgba(139, 216, 255, 0.12);
}

.category-card strong {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.category-card span {
  display: none;
}

.category-card small {
  justify-self: end;
  align-self: end;
  color: rgba(199, 237, 255, 0.86);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.category-card .category-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.category-card .category-count-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: currentColor;
  opacity: 0.88;
}

.sticky-toolbar {
  position: sticky;
  z-index: 14;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 4px;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(120, 190, 255, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.list-toolbar.sticky-toolbar {
  position: sticky;
  isolation: isolate;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  margin-bottom: 0;
  padding-bottom: 10px;
  background: rgba(7, 21, 38, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  backdrop-filter: blur(14px) saturate(1.04);
}

.list-toolbar .toolbar-back {
  grid-column: 1;
  justify-self: start;
  position: relative;
  z-index: 2;
}

.list-toolbar .toolbar-title {
  grid-column: 2;
  justify-self: center;
  width: max-content;
  max-width: min(72vw, 420px);
  text-align: center;
}

.list-toolbar .toolbar-title h2 {
  text-align: center;
}

.list-toolbar.sticky-toolbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(7, 21, 38, 0.32) 0%,
    rgba(7, 21, 38, 0.1) 55%,
    rgba(7, 21, 38, 0) 100%
  );
}

#listView .work-rows {
  padding-top: 6px;
}

.sticky-toolbar .section-kicker,
.sticky-toolbar .muted-text {
  display: none;
}

.toolbar-title {
  min-width: 0;
  text-align: left;
}

.toolbar-title h2 {
  overflow: hidden;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbar-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(140, 200, 255, 0.22);
  border-radius: 8px;
  background: rgba(139, 216, 255, 0.03);
  white-space: nowrap;
  color: var(--accent-strong);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .list-toolbar .toolbar-back:hover {
    background: rgba(139, 216, 255, 0.06);
    border-color: rgba(165, 220, 255, 0.38);
    transform: none;
  }
}

.list-toolbar .toolbar-back:active,
.list-toolbar .toolbar-back:focus-visible {
  background: rgba(139, 216, 255, 0.06);
  border-color: rgba(165, 220, 255, 0.38);
  transform: none;
}

.ghost-button {
  min-height: 38px;
  padding: 8px 12px;
}

.list-toolbar .toolbar-back.ghost-button {
  min-height: 34px;
  padding: 6px 10px;
}

.work-rows,
.queue-rows {
  display: grid;
  gap: 8px;
}

.work-rows {
  gap: 0;
}

.queue-rows {
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.work-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: start;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(139, 216, 255, 0.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background 160ms ease;
}

.work-row-top {
  position: relative; /* 未读红点的定位基准 */
  display: flex;
  align-items: baseline;
  gap: 8px;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.work-row-top .row-title {
  flex: 1 1 auto;
  min-width: 0;
}

.work-row-detail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  padding-left: 0;
}

.work-rows .work-row:last-child {
  border-bottom: 0;
}

.work-rows .paid-trial-guide {
  margin-bottom: 8px;
}

@media (hover: hover) and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) {
    .work-row:hover {
      background: rgba(139, 216, 255, 0.04);
    }
  }
}

.queue-row {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 10px 0 16px;
  border: 0;
  border-bottom: 1px solid rgba(139, 216, 255, 0.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  text-align: left;
  -webkit-touch-callout: none;
}

.queue-rows .queue-row:last-child {
  border-bottom: 0;
}

.queue-rows.is-reordering .queue-row:not(.is-drag-floating) {
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

.queue-row.is-drag-floating {
  opacity: 1;
  border: 0;
  border-radius: 8px;
  background: rgba(42, 101, 151, 0.38);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
  transform: scale(1.01);
  transition: none;
  pointer-events: none;
  will-change: transform, top;
}

.queue-row-placeholder {
  min-height: 48px;
  margin: 0;
  border: 0;
  border-bottom: 1px dashed rgba(150, 217, 255, 0.22);
  border-radius: 0;
  background: rgba(139, 216, 255, 0.05);
  box-sizing: border-box;
  transition: height 160ms ease, margin 160ms ease;
}

body.queue-drag-active {
  touch-action: none;
  overscroll-behavior: none;
}

body.player-page-open {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body.player-page-open #playerOverlay,
body.player-page-open #playerOverlay .player-sheet,
body.player-page-open .comments-page {
  touch-action: pan-y;
}

body.queue-drag-active .queue-drawer {
  overflow: hidden;
}

.queue-row .queue-actions {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
  padding-right: 2px;
}

.queue-remove,
.drag-handle,
.queue-ghost-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  min-width: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

/* 两个图标统一细描边、同尺寸，粗细一致 */
.queue-remove .ui-icon,
.drag-handle .ui-icon {
  width: 16px;
  height: 16px;
}

.queue-remove.queue-ghost-action {
  margin-left: 2px;
  margin-right: 0;
}

.drag-handle.queue-ghost-action {
  margin-left: 0;
}

.queue-remove,
.drag-handle {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.player-sheet .player-meta-download,
.player-meta-download {
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .queue-remove:hover,
  .drag-handle:hover,
  .queue-ghost-action:hover {
    background: transparent;
    border-color: transparent;
    color: var(--accent-strong);
    opacity: 0.9;
    transform: none;
  }
}

.drag-handle {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.work-row.is-current {
  border-bottom-color: rgba(139, 216, 255, 0.12);
  background: rgba(62, 139, 205, 0.08);
  box-shadow: inset 3px 0 0 rgba(139, 216, 255, 0.48);
}

.work-row.is-current .row-title {
  color: var(--accent-strong);
}

.queue-row.is-current {
  border: 0;
  border-bottom: 1px solid rgba(139, 216, 255, 0.1);
  background: rgba(62, 139, 205, 0.1);
  box-shadow: inset 3px 0 0 rgba(139, 216, 255, 0.48);
}

.row-index {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.row-main {
  min-width: 0;
}

.row-title {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-row .row-title[role="button"],
.work-row .row-title.is-clickable {
  cursor: pointer;
}

.row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 0;
  color: var(--muted);
  font-size: 12px;
}

.work-row .row-meta > span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0 8px;
  background: rgba(139, 216, 255, 0.16);
  vertical-align: middle;
}

.queue-row .queue-title {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-row.is-current .queue-title {
  color: var(--accent-strong);
  font-weight: 600;
}

/* 标题以【《「等全角框类符号开头时悬挂半字：框类字形只占右半格，
   不悬挂会让带符号的行比纯文字行往里缩半个字，看起来不齐 */
.queue-row .queue-title.queue-title--hang {
  margin-left: -0.5em;
}

.sort-hint {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.tag {
  color: var(--accent-strong);
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.work-row .row-index {
  flex: 0 0 auto;
  align-self: baseline;
}

.work-row-locked .lock-title {
  color: rgba(155, 221, 255, 0.85);
  font-weight: 500;
}

.work-row-locked .work-row-detail {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.work-row-locked .lock-spacer {
  visibility: hidden;
  flex: 0 0 auto;
}

.work-row-locked .lock-sub {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: rgba(155, 221, 255, 0.7);
  font-size: 13px;
  letter-spacing: 0.2px;
}

.work-row .row-title {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.work-row-detail .row-meta {
  display: none;
}

.work-row-detail .row-actions {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
}

.work-row .row-actions button,
.work-row .row-actions a {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  min-height: 34px;
  padding: 6px 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: rgba(226, 244, 255, 0.86);
  text-decoration: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

/* hover 只给真有鼠标的设备：iOS 上 tap 会触发 hover 并一直粘着，
   松手后按钮还留着高亮，所以必须用媒体查询隔开 */
@media (hover: hover) and (pointer: fine) {
  .work-row .row-actions button:hover,
  .work-row .row-actions a:hover {
    border-color: transparent;
    background: rgba(139, 216, 255, 0.05);
    color: var(--accent-strong);
    transform: none;
  }
}

/* 手指按下的那一瞬间才亮，松开立刻恢复 */
.work-row .row-actions button:active,
.work-row .row-actions a:active {
  border-color: transparent;
  background: rgba(139, 216, 255, 0.05);
  color: var(--accent-strong);
  transform: none;
}

/* iOS 点完之后 focus 会留在按钮上，键盘导航才需要焦点样式 */
.work-row .row-actions button:focus,
.work-row .row-actions a:focus {
  outline: none;
  background: transparent;
  color: rgba(226, 244, 255, 0.86);
}

.work-row .row-actions button:focus-visible,
.work-row .row-actions a:focus-visible {
  outline: 2px solid rgba(139, 216, 255, 0.5);
  outline-offset: 1px;
}

.work-row .row-actions .labeled-icon-button {
  justify-content: center;
  gap: 4px;
}

.work-row .row-actions .button-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-actions button,
.row-actions a {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(15, 38, 62, 0.7);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
}

.row-actions .labeled-icon-button .ui-icon {
  width: 14px;
  height: 14px;
}

.work-row .row-actions button[data-icon="play"] .ui-icon {
  width: 18px;
  height: 18px;
}

.work-row .row-actions button[data-icon="video"] .ui-icon {
  width: 20px;
  height: 20px;
}


.paid-trial-guide {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 21, 38, 0.7);
  backdrop-filter: blur(14px);
}

.paid-trial-guide-intro {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.paid-trial-buy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.paid-trial-buy-card {
  min-width: 0;
  border: 1px solid rgba(139, 216, 255, 0.16);
  border-radius: 11px;
  background: rgba(15, 38, 62, 0.5);
  overflow: hidden;
}

.paid-trial-buy-toggle {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

@media (hover: hover) and (pointer: fine) {
  .paid-trial-buy-toggle:hover {
    background: transparent;
    border-color: transparent;
    outline: 0;
  }
}

.paid-trial-buy-toggle:focus,
.paid-trial-buy-toggle:focus-visible {
  background: transparent;
  border-color: transparent;
  outline: 0;
}

@media (hover: hover) and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) {
    .paid-trial-buy-toggle:hover {
      background: var(--button-hover);
    }
  }
}

.paid-trial-buy-toggle strong,
.paid-trial-buy-toggle small {
  display: block;
}

.paid-trial-buy-toggle strong {
  color: var(--text);
  font-size: 14px;
}

.paid-trial-buy-toggle small {
  margin-top: 3px;
  color: var(--accent-strong);
  font-size: 12px;
}

.paid-trial-buy-arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

.paid-trial-buy-detail {
  display: grid;
  gap: 8px;
  padding: 10px 10px 10px;
  border-top: 1px solid var(--line);
}

.paid-trial-buy-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.paid-trial-buy-highlight {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.paid-trial-buy-highlight a {
  color: #9ed7ff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.paid-trial-buy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.paid-trial-buy-actions a {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(15, 38, 62, 0.72);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}

.paid-trial-intro-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 2px;
  padding: 11px;
  border: 1px solid rgba(139, 216, 255, 0.14);
  border-radius: 11px;
  background: rgba(6, 18, 32, 0.72);
  color: var(--muted);
}

.paid-trial-intro-panel h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

.paid-trial-intro-duration {
  margin: 0;
  color: var(--accent-strong);
  font-size: 13px;
}

.paid-trial-intro-body {
  display: grid;
  gap: 7px;
}

.paid-trial-intro-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 简介里的出现称谓与标签（免费作品简介数据带，付费简介没有就不渲染）
   刻意做得比正文更淡：能看到就行，不跟正文抢注意力 */
.intro-call {
  margin: 0;
  color: rgba(198, 226, 255, 0.55);
  font-size: 12px;
  line-height: 1.6;
}

.intro-tags {
  margin: 0;
  color: rgba(198, 226, 255, 0.55);
  font-size: 11.5px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 未读提醒：分类卡右上角数字角标 + 作品行标题旁小红点 + 工具条全部已读 */
.category-card .category-unread {
  /* display 必须显式给：.category-card span 有一条 display:none 的老规则会盖过单类选择器 */
  display: block;
  position: absolute;
  top: 9px;
  right: 9px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 99, 92, 0.92);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  box-sizing: border-box;
}

/* 未读红点：绝对定位钉在行最右缘（CC 右侧 14px 安全边距的空隙里），
   不占排版空间——有无 CC、标题长短，红点位置全站统一，其他元素零移动 */
.row-unread {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 99, 92, 0.9);
}

/* 无 CC 的未读行同样留出右侧 14px，防止长标题伸进红点底下 */
.work-row-top:has(.row-unread) {
  padding-right: 14px;
}

/* 列表右上角操作区：全部已读（条件显示）+ 排序按钮，右对齐 */
.toolbar-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.toolbar-mark-read {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent-strong);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.toolbar-mark-read:active {
  background: rgba(139, 216, 255, 0.08);
}

/* 排序按钮：常驻右上角，无边框（和返回分类/全部已读同风格），图标 + 当前模式 */
.toolbar-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent-strong);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.toolbar-sort .sort-ico { opacity: 0.75; font-size: 13px; }
.toolbar-sort:active { background: rgba(139, 216, 255, 0.08); }

/* 录制年份：右下角小落款，比标签再淡一点 */
.intro-year {
  margin: 0;
  text-align: right;
  color: rgba(198, 226, 255, 0.45);
  font-size: 11.5px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .paid-trial-buy-grid {
    grid-template-columns: 1fr;
  }

  .paid-trial-buy-actions a {
    width: 100%;
    justify-content: center;
  }
}

.empty {
  padding: 28px 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

.mini-player {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: min(760px, calc(100% - 26px));
  padding: 8px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: rgba(6, 17, 31, 0.92);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), 0 0 26px rgba(83, 162, 232, 0.12);
  backdrop-filter: blur(20px);
  transform: translateX(-50%);
}

.mini-main {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  text-align: left;
  background: transparent;
  border-color: transparent;
}

.mini-title-marquee {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.mini-player .mini-title-marquee .marquee-text,
.mini-player .mini-title-text {
  display: inline-block;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}

.mini-title-marquee:not(.is-marquee) .marquee-track {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-title-marquee:not(.is-marquee) .mini-title-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.mini-title-marquee:not(.is-marquee) .marquee-text--clone {
  display: none;
}

.mini-title-marquee.is-marquee .marquee-track {
  display: inline-flex;
  width: max-content;
  max-width: none;
  will-change: transform;
  animation: title-marquee-mini 18s linear infinite;
}

.mini-title-marquee.is-marquee .marquee-text--clone {
  display: inline-block;
}

.mini-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mini-controls button {
  flex: 0 0 auto;
}

.mini-controls .primary-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
}

.mini-controls #miniPlay .ui-icon,
.mini-controls .primary-icon .ui-icon {
  width: 26px;
  height: 26px;
}

.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 50%;
  color: var(--accent-strong);
}

.primary-icon {
  width: 48px;
  height: 48px;
  min-height: 48px;
  min-width: 48px;
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(62, 139, 205, 0.64), rgba(96, 83, 188, 0.44));
}

.icon-button .ui-icon {
  width: 22px;
  height: 22px;
}

.primary-icon .ui-icon {
  width: 24px;
  height: 24px;
}

.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

.ui-icon .icon-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ui-icon--sm {
  width: 16px;
  height: 16px;
}

.ui-icon--toast {
  width: 20px;
  height: 20px;
}

.labeled-icon-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.labeled-icon-button .button-label {
  line-height: 1.2;
}

.icon-only-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--accent-strong);
}

.icon-only-button .ui-icon {
  width: 20px;
  height: 20px;
}

.icon-only-button[data-icon="close"] .ui-icon,
.clear-search .ui-icon {
  width: 16px;
  height: 16px;
}

.close-button.icon-only-button {
  justify-self: end;
  width: 36px;
  height: 36px;
  min-height: 36px;
  min-width: 36px;
}

.drawer-close.icon-only-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  min-width: 34px;
}

.clear-search.icon-only-button .ui-icon {
  width: 16px;
  height: 16px;
}

.overlay {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 5, 13, 0.7);
  backdrop-filter: blur(12px);
}

.drawer-overlay {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 5, 13, 0.7);
  backdrop-filter: blur(12px);
}

.player-sheet,
.video-sheet {
  position: relative;
  display: grid;
  gap: 16px;
  width: min(560px, 100%);
  max-width: 100%;
  min-width: 0;
  max-height: calc(100vh - 36px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(87, 173, 255, 0.16), transparent 18rem),
    var(--panel-strong);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.player-sheet > * {
  min-width: 0;
  max-width: 100%;
}

.close-button {
  justify-self: end;
  min-height: 36px;
  padding: 7px 12px;
}

.close-button.icon-only-button {
  padding: 0;
}

.player-stage {
  --player-stage-size: min(220px, 58vw);
  --subtitle-vignette-width: min(90%, 720px);
  --subtitle-vignette-height: 200px;
  --subtitle-text-max-width: 100%;
  position: relative;
  width: var(--player-stage-size);
  height: var(--player-stage-size);
  margin-inline: auto;
  justify-self: center;
  flex-shrink: 0;
  overflow: visible;
}

.player-stage.subtitles-active {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.player-stage:not(.subtitles-active) .player-art {
  inset: unset;
  top: -7%;
  left: 4%;
  width: 92%;
  height: 92%;
}

.player-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(204, 239, 255, 0.24), transparent 15%),
    radial-gradient(circle at 50% 50%, rgba(139, 216, 255, 0.12), transparent 44%),
    radial-gradient(circle at 34% 72%, rgba(155, 140, 255, 0.24), transparent 36%),
    linear-gradient(135deg, rgba(13, 43, 72, 0.86), rgba(43, 38, 103, 0.54));
  box-shadow: 0 0 42px rgba(86, 171, 241, 0.18), inset 0 0 34px rgba(204, 239, 255, 0.08);
  animation: artBreath 6.5s ease-in-out infinite;
}

.player-art span {
  position: absolute;
  pointer-events: none;
}

.art-glow {
  inset: 19%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(204, 239, 255, 0.24), transparent 56%),
    radial-gradient(circle at 42% 60%, rgba(139, 216, 255, 0.16), transparent 62%);
  filter: blur(2px);
  animation: coreFloat 7.2s ease-in-out infinite;
}

.art-ring {
  inset: 9%;
  border: 1px solid rgba(204, 239, 255, 0.28);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(139, 216, 255, 0.12);
}

.art-ring-two {
  inset: 20%;
  border-color: rgba(155, 140, 255, 0.2);
  animation: slowRotate 18s linear infinite;
}

.art-wave {
  inset: 24%;
  border: 1px solid rgba(139, 216, 255, 0.2);
  border-radius: 50%;
  opacity: 0.58;
  animation: wavePulse 5.8s ease-out infinite;
}

.art-wave-two {
  animation-delay: 2.8s;
  border-color: rgba(155, 140, 255, 0.18);
}

.art-particle {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(204, 239, 255, 0.86);
  box-shadow: 0 0 12px rgba(139, 216, 255, 0.78);
  animation: particleDrift 8s ease-in-out infinite;
}

.art-particle-one {
  left: 26%;
  top: 28%;
}

.art-particle-two {
  left: 66%;
  top: 34%;
  width: 4px;
  height: 4px;
  animation-delay: 1.5s;
}

.art-particle-three {
  left: 57%;
  top: 70%;
  width: 6px;
  height: 6px;
  animation-delay: 3s;
}

.art-particle-four {
  left: 34%;
  top: 64%;
  width: 3px;
  height: 3px;
  animation-delay: 4.6s;
}

.overlay.is-playing .player-art {
  animation-duration: 4.5s;
}

.overlay.is-playing .art-wave {
  animation-duration: 3.4s;
}

.overlay.is-playing .art-glow {
  animation-duration: 4.2s;
}

.overlay.is-playing .art-particle {
  animation-duration: 5.2s;
}

@keyframes artBreath {
  0%,
  100% {
    box-shadow: 0 0 36px rgba(86, 171, 241, 0.16), inset 0 0 28px rgba(204, 239, 255, 0.07);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 54px rgba(139, 216, 255, 0.28), inset 0 0 42px rgba(204, 239, 255, 0.12);
    transform: scale(1.018);
  }
}

@keyframes coreFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.98);
    opacity: 0.72;
  }
  50% {
    transform: translate3d(0, -5px, 0) scale(1.06);
    opacity: 0.95;
  }
}

@keyframes slowRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wavePulse {
  0% {
    transform: scale(0.72);
    opacity: 0;
  }
  38% {
    opacity: 0.58;
  }
  100% {
    transform: scale(1.48);
    opacity: 0;
  }
}

@keyframes particleDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.42;
  }
  45% {
    transform: translate3d(7px, -12px, 0);
    opacity: 0.95;
  }
  72% {
    transform: translate3d(-6px, 5px, 0);
    opacity: 0.68;
  }
}

.progress-area {
  display: grid;
  gap: 8px;
}

.player-stage .subtitle-panel {
  position: absolute;
  left: 50%;
  top: 44%;
  bottom: auto;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 3.2em;
  max-height: none;
  margin: 0;
  padding: 0 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.player-stage .subtitle-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: var(--subtitle-vignette-width);
  height: var(--subtitle-vignette-height);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background:
    radial-gradient(
      ellipse 100% 100% at 50% 50%,
      rgba(0, 2, 8, 0.9) 0%,
      rgba(1, 6, 14, 0.76) 28%,
      rgba(2, 10, 22, 0.46) 54%,
      rgba(5, 14, 28, 0.16) 76%,
      rgba(8, 18, 33, 0) 100%
    );
  box-shadow: none;
  filter: blur(6px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.player-stage .subtitle-panel.hidden {
  display: none;
}

.player-stage.subtitles-active .player-art {
  visibility: hidden;
  opacity: 0;
}

.player-stage.subtitles-active .subtitle-panel:not(.hidden) {
  display: flex;
}

.subtitle-panel--single .subtitle-line--context {
  display: none;
}

/* ===== 音频弹幕（猫耳模式）：展示区上部飞弹幕、球球退暗背景、字幕移到区域底部 ===== */
/* 弹幕开启时展示区拉满全宽（高度不变） */
.player-stage.dmk-active {
  width: 100%;
  max-width: 100%;
}

/* 球球动画维持董事长原版（行星轨道），锁定宽高比 0.7：
   宽高同源等比缩放，屏幕再小也只是整体变小、绝不变扁 */
#playerOverlay .player-stage:not(.subtitles-active) .player-art {
  --jy-ball-w: min(250px, 58vw);
  inset: auto;
  top: calc(50% - var(--jy-ball-w) * 0.35 - 14px);
  left: calc(50% - var(--jy-ball-w) / 2);
  width: var(--jy-ball-w);
  height: calc(var(--jy-ball-w) * 0.7);
}

/* 字幕从区域中间移到底部（弹幕飘上面、字幕钉下面，互不遮挡） */
.player-stage .subtitle-panel {
  top: auto;
  bottom: 2%;
  transform: translate(-50%, 0);
}

/* 音频字幕：去掉原来又高又重的暗色晕影底，换成贴文字的 50% 黑色小黑条 */
.player-stage .subtitle-panel::before {
  display: none;
}

.player-stage .subtitle-panel .subtitle-line--current {
  /* 黑底跟随字幕实际宽度（fit-content），不再整行铺满 */
  width: fit-content;
  max-width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 3px 10px;
}

/* 两句字幕之间的空档：没有文字时黑条一并隐藏，不留孤零零的黑横条 */
.player-stage .subtitle-panel .subtitle-line--current:empty {
  background: none;
  padding: 0;
}

/* 「最近更新·编号」行隐藏，让位给弹幕胶囊 */
#playerOverlay .player-meta-line {
  display: none !important;
}

/* 弹幕飞行层：借展示区 overflow:visible 的特性横向铺满整个屏幕宽度飞行，
   不需要改动展示区和球球本身的任何尺寸 */
.jy-adm-layer {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.jy-adm-item {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 3px;
  border-radius: 4px;
  color: #fff;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000;
  will-change: transform;
}

/* 入口小胶囊（猫耳同款）：[弹⚙｜来点弹幕吧~]，标题上方一行靠右、贴内容收窄
   （容器可能是 grid 或 flex，margin-left:auto 两种布局都能靠右） */
.audio-dmk-pill {
  display: flex;
  align-items: center;
  justify-self: end;
  width: auto;
  max-width: min(190px, 70%);
  height: 30px;
  /* 上移一点、和标题留出呼吸 */
  margin: -26px 0 8px auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(8, 18, 33, 0.6);
  overflow: hidden;
}

.audio-dmk-pill .adm-gear,
.audio-dmk-pill .adm-entry {
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.audio-dmk-pill .adm-gear {
  order: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 10px;
  border-left: 1px solid var(--line);
  color: var(--accent-strong);
  font-size: 13px;
}

.audio-dmk-pill .adm-gear-glyph {
  font-weight: 600;
  line-height: 1;
}

.audio-dmk-pill .adm-gear svg {
  width: 17px;
  height: 17px;
}

/* 插件原版图标自带深色填充，深色界面上看不见，强制改白 */
.audio-dmk-pill .adm-gear svg path {
  fill: #e6efff !important;
}

.audio-dmk-pill .adm-entry {
  order: 1;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subtitle-line {
  min-height: 0;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  line-height: 1.45;
}

.subtitle-line--current {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 3.2em;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(245, 252, 255, 1);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.015em;
  text-align: center;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.75),
    0 0 18px rgba(139, 216, 255, 0.16);
  box-sizing: border-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
}

.subtitle-line--context {
  display: none;
  color: var(--muted);
  font-size: 14px;
  opacity: 0.62;
}

#progressBar {
  width: 100%;
  height: 28px;
  accent-color: var(--accent);
  cursor: pointer;
  touch-action: pan-y;
}

#progressBar::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.46),
    0 4px 14px rgba(139, 216, 255, 0.22);
  -webkit-appearance: none;
  appearance: none;
}

#progressBar::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.46),
    0 4px 14px rgba(139, 216, 255, 0.22);
}

@media (max-width: 520px) {
  #progressBar::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
  }

  #progressBar::-moz-range-thumb {
    width: 14px;
    height: 14px;
  }
}

.time-row {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.player-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.player-actions button,
.player-actions a {
  min-height: 44px;
  padding: 10px 14px;
}

.player-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.player-meta-line {
  display: none;
  width: 100%;
  min-width: 0;
}

.player-meta-row {
  display: block;
  width: 100%;
  min-width: 0;
}

.player-meta-kicker {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-title-row {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.player-title-marquee {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.player-title-marquee .marquee-text {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0;
}

.player-title-marquee:not(.is-marquee) .marquee-track {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.player-title-marquee:not(.is-marquee) .marquee-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

.player-title-marquee:not(.is-marquee) .marquee-text--clone {
  display: none;
}

.player-title-marquee.is-marquee .marquee-track {
  display: inline-flex;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  will-change: transform;
  animation: title-marquee 18s linear infinite;
}

.player-title-marquee.is-marquee .marquee-text--clone {
  display: inline-block;
}

#playerOverlay.subtitle-active .player-title-marquee .marquee-track {
  animation: none !important;
  transform: none !important;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

#playerOverlay.subtitle-active .player-title-marquee .marquee-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#playerOverlay.subtitle-active .player-title-marquee .marquee-text--clone {
  display: none !important;
}

.marquee-track {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

.marquee-text {
  display: inline-block;
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0;
  white-space: nowrap;
}

@keyframes title-marquee {
  0%,
  18% {
    transform: translate3d(0, 0, 0);
  }

  82%,
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.player-meta-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.sleep-timer-wrap {
  position: relative;
  flex-shrink: 0;
}

.player-meta-timer,
.sleep-timer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-strong);
  box-shadow: none;
  white-space: nowrap;
  flex-direction: row;
  flex-wrap: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .player-meta-timer:hover,
  .sleep-timer-button:hover {
    background: rgba(139, 216, 255, 0.08);
    border-color: transparent;
    opacity: 0.92;
    transform: none;
  }
}

.player-meta-timer.is-active,
.sleep-timer-button.is-active {
  color: var(--accent);
}

.player-meta-timer-label {
  font-size: 13px;
  line-height: 1;
}

.player-meta-timer .ui-icon--timer {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.player-meta-timer .sleep-timer-icon {
  width: 18px;
  height: 18px;
}

.sleep-timer-label {
  white-space: nowrap;
  line-height: 1;
  font-size: 13px;
  color: inherit;
}

.sleep-timer-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  max-width: 17px;
  max-height: 17px;
  flex: 0 0 17px;
  line-height: 0;
  overflow: hidden;
  color: inherit;
}

.sleep-timer-icon-wrap svg,
.sleep-timer-icon {
  display: block;
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  max-width: 17px;
  max-height: 17px;
  flex: 0 0 17px;
  color: inherit;
}

.sleep-timer-status {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

body.sleep-timer-sheet-open {
  overflow: hidden;
}

.sleep-timer-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sleep-timer-overlay.hidden {
  display: none;
}

.sleep-timer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 5, 13, 0.58);
  cursor: pointer;
}

.sleep-timer-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  max-height: 72vh;
  overflow-x: hidden;
  padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(87, 173, 255, 0.12), transparent 16rem),
    var(--panel-strong);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.sleep-timer-sheet-title {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  letter-spacing: 0.02em;
}

.sleep-timer-sheet--custom .sleep-timer-sheet-title {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.sleep-timer-quick-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.sleep-timer-quick {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(17, 43, 70, 0.72);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.sleep-timer-quick--custom {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sleep-timer-stop-after {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 8px 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sleep-timer-stop-after-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sleep-timer-stop-after-mark {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(139, 216, 255, 0.42);
  border-radius: 50%;
  background: rgba(17, 43, 70, 0.55);
  box-sizing: border-box;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.sleep-timer-stop-after-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

.sleep-timer-stop-after-input:checked + .sleep-timer-stop-after-mark {
  border-color: rgba(155, 140, 255, 0.85);
  background: rgba(155, 140, 255, 0.16);
  box-shadow: 0 0 0 3px rgba(155, 140, 255, 0.12);
}

.sleep-timer-stop-after-input:checked + .sleep-timer-stop-after-mark::after {
  background: var(--accent-strong);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.sleep-timer-stop-after-text {
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}

.sleep-timer-clear {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(155, 140, 255, 0.28);
  border-radius: 12px;
  background: rgba(155, 140, 255, 0.08);
  color: var(--accent-strong);
  font-size: 14px;
}

.sleep-timer-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  max-width: 100%;
  overflow-x: hidden;
}

.sleep-timer-picker-col {
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
}

.sleep-timer-picker-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.sleep-timer-scroll {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 180px;
  overflow-x: hidden !important;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: rgba(8, 18, 33, 0.72);
  background-image:
    linear-gradient(to bottom, rgba(8, 18, 33, 0.96), rgba(8, 18, 33, 0)),
    linear-gradient(to top, rgba(8, 18, 33, 0.96), rgba(8, 18, 33, 0)),
    linear-gradient(rgba(108, 178, 255, 0.1), rgba(108, 178, 255, 0.1));
  background-size: 100% 72px, 100% 72px, calc(100% - 12px) 36px;
  background-position: top, bottom, center;
  background-repeat: no-repeat;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

.sleep-timer-scroll::before,
.sleep-timer-scroll::after {
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  height: 72px;
  pointer-events: none;
}

.sleep-timer-scroll::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(8, 18, 33, 0.96), rgba(8, 18, 33, 0));
}

.sleep-timer-scroll::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(8, 18, 33, 0.96), rgba(8, 18, 33, 0));
}

.sleep-timer-scroll-list {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.sleep-timer-scroll-pad {
  height: 72px;
}

.sleep-timer-scroll-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 36px;
  color: var(--muted);
  font-size: 15px;
  opacity: 0.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  scroll-snap-align: center;
  transform-origin: center center;
  transition: color 0.16s ease, opacity 0.16s ease, transform 0.16s ease, text-shadow 0.16s ease;
}

.sleep-timer-scroll-item.is-selected {
  color: rgba(238, 249, 255, 1);
  font-size: 16px;
  font-weight: 800;
  opacity: 1;
  transform: scale(1.08);
  text-shadow: 0 0 12px rgba(132, 205, 255, 0.35);
  z-index: 1;
}

.sleep-timer-sheet-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sleep-timer-sheet-action {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
}

.sleep-timer-sheet-action--ghost {
  border: 1px solid var(--line);
  background: rgba(17, 43, 70, 0.72);
  color: var(--text);
}

.sleep-timer-sheet-action--primary {
  border: 1px solid var(--line-strong);
  background: linear-gradient(135deg, rgba(62, 139, 205, 0.64), rgba(96, 83, 188, 0.44));
  color: var(--text);
}

.player-meta-actions .player-meta-download {
  flex-shrink: 0;
  align-self: center;
}

.player-meta-download,
.download-audio-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  max-width: 34px;
  max-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-strong);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .player-sheet .player-meta-download:hover {
    background: transparent;
    border-color: transparent;
    opacity: 0.86;
    transform: none;
  }
}

.player-meta-download .ui-icon,
.download-audio-button .ui-icon {
  width: 17px;
  height: 17px;
}

.subtitle-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-strong);
  box-shadow: none;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.subtitle-toggle-button[aria-pressed="true"] {
  color: var(--accent);
  background: rgba(139, 216, 255, 0.08);
}

.subtitle-toggle-button[data-icon="subtitle"] .ui-icon {
  width: 19px;
  height: 19px;
}

.work-row .row-actions button[data-icon="subtitle"] .ui-icon {
  width: 16px;
  height: 16px;
}

.subtitle-toggle-button[data-icon="subtitle"] .icon-svg,
.work-row .row-actions button[data-icon="subtitle"] .icon-svg {
  fill: currentColor;
}

.subtitle-toggle-button:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.38;
}

.subtitle-menu-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.subtitle-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  box-sizing: border-box;
  width: max-content;
  min-width: 132px;
  max-width: min(220px, calc(100vw - 28px));
  padding: 6px;
  border: 1px solid rgba(139, 216, 255, 0.22);
  border-radius: 12px;
  background: rgba(7, 18, 32, 0.96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
}

.subtitle-menu.hidden {
  display: none;
}

.subtitle-menu-option {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .subtitle-menu-option:hover {
    background: rgba(139, 216, 255, 0.12);
    color: var(--accent-strong);
  }
}

.subtitle-menu-option[aria-checked="true"] {
  background: rgba(139, 216, 255, 0.12);
  color: var(--accent-strong);
}

.subtitle-menu-option--off {
  color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
  .player-sheet .subtitle-toggle-button:hover:not(:disabled) {
    background: rgba(139, 216, 255, 0.08);
    border-color: transparent;
    opacity: 0.92;
    transform: none;
  }
}

.player-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  max-width: 420px;
  margin: 4px auto 0;
  padding: 0;
  box-sizing: border-box;
}

.player-controls-aux {
  display: grid;
  grid-template-columns: minmax(54px, 1fr) minmax(42px, 0.82fr) minmax(34px, 0.72fr) minmax(58px, 1fr) minmax(34px, 0.72fr);
  align-items: center;
  column-gap: 4px;
  width: 100%;
  max-width: 380px;
  min-width: 0;
  min-height: 0;
  margin-inline: auto;
  padding: 0;
  box-sizing: border-box;
}

.player-controls-aux .sleep-timer-wrap {
  grid-column: 1;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.player-controls-aux .playback-rate-wrap {
  grid-column: 2;
  justify-self: center;
  min-width: 0;
}

.player-controls-aux .player-control-download {
  grid-column: 3;
  justify-self: center;
}

.player-controls-aux .subtitle-menu-wrap {
  grid-column: 4;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.player-controls-aux .comment-toggle-button {
  grid-column: 5;
  justify-self: center;
}

.player-aux-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-strong);
  box-shadow: none;
  flex-shrink: 1;
  font-size: 13px;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .player-sheet .player-aux-btn:hover:not(:disabled) {
    background: transparent;
    border-color: transparent;
    opacity: 0.9;
    transform: none;
  }
}

.player-sheet .player-aux-btn:active:not(:disabled) {
  background: rgba(139, 216, 255, 0.06);
}

.player-controls-aux .sleep-timer-button {
  width: auto;
  max-width: 100%;
  gap: 3px;
  padding: 0 4px;
}

.player-controls-aux .sleep-timer-label {
  font-size: 13px;
  font-weight: 650;
}

.player-controls-aux .player-control-download {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
  flex: 0 0 30px;
  padding: 0;
}

.player-controls-aux .player-control-download .ui-icon,
.player-controls-aux .player-full-download-icon {
  width: 19px;
  height: 19px;
  display: block;
}

.player-controls-aux .subtitle-toggle-button {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0 4px;
  font-size: 13px;
}

.player-controls-aux .subtitle-toggle-button .ui-icon {
  display: none;
}

.player-controls-aux .subtitle-toggle-button .button-label {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  line-height: 1;
  white-space: nowrap;
}

.player-controls-aux .subtitle-toggle-button .cc-main {
  color: currentColor;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.player-controls-aux .subtitle-toggle-button .cc-state {
  color: rgba(204, 239, 255, 0.72);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.playback-rate-select {
  width: auto;
  min-width: 42px;
  max-width: 52px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: transparent;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

.playback-rate-select:focus,
.playback-rate-select:active {
  outline: none;
  background: transparent;
  box-shadow: none;
}

.playback-rate-select:focus-visible {
  outline: none;
}

.playback-rate-select option {
  background: #071526;
  color: var(--text);
}

.player-controls-aux .subtitle-menu {
  top: auto;
  bottom: calc(100% + 8px);
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.progress-area + .sleep-timer-status {
  margin: 2px 0 0;
  text-align: center;
}

.player-control-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  column-gap: 0;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  padding: 2px 0;
  box-sizing: border-box;
}

.player-ghost-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-strong);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .player-sheet .player-ghost-control:hover {
    background: transparent;
    border-color: transparent;
    opacity: 0.86;
    transform: none;
  }
}

.player-ghost-control .ui-icon {
  width: 24px;
  height: 24px;
}

.player-main-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(222, 244, 255, 0.86);
  background: rgba(8, 21, 38, 0.08);
  color: var(--accent-strong);
  box-shadow: 0 0 18px rgba(139, 216, 255, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  .player-sheet .player-main-play:hover {
    border-color: rgba(236, 250, 255, 0.95);
    background: rgba(139, 216, 255, 0.08);
    transform: none;
  }
}

.player-main-play .ui-icon {
  width: 30px;
  height: 30px;
}

.drawer-overlay {
  align-items: end;
  padding: 0;
  overflow-x: hidden;
}

#queueOverlay {
  overflow-x: hidden;
}

.queue-drawer {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(720px, 100%);
  max-width: 100%;
  min-width: 0;
  height: 72vh;
  max-height: 72vh;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  background: rgba(7, 18, 32, 0.96);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.38);
}

.queue-drawer-header {
  position: relative;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  padding-right: 36px;
}

.queue-list-scroll {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.queue-drag-active .queue-list-scroll {
  overflow: hidden;
}

.queue-drawer-close {
  position: absolute;
  top: 3px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .queue-drawer-close:hover {
    color: var(--accent-strong);
    background: transparent;
    border-color: transparent;
  }
}

.queue-drawer-close .ui-icon {
  width: 16px;
  height: 16px;
}

.queue-drawer-top {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 10px;
}

/* 队列 Tab：当前播放 / 历史播放 */
.queue-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
}

.queue-tab {
  position: relative;
  padding: 2px 0 7px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.queue-tab.is-active {
  color: var(--text);
}

.queue-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-strong);
}

/* 切到历史 Tab：隐藏"当前播放"那套头部与列表，只显示历史 */
.queue-drawer.queue-tab-history .queue-drawer-heading,
.queue-drawer.queue-tab-history .drawer-actions--queue,
.queue-drawer.queue-tab-history #sortHint,
.queue-drawer.queue-tab-history #queueRows {
  display: none;
}

.queue-drawer:not(.queue-tab-history) #historyRows {
  display: none;
}

/* 历史 Tab 没有副标题/拖拽提示那两行，第一条会紧贴顶部与关闭按钮，加点顶距拉开 */
.queue-drawer.queue-tab-history .queue-list-scroll {
  padding-top: 8px;
}

/* 历史空状态 */
.queue-empty {
  padding: 30px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.queue-drawer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.queue-drawer-heading h2 {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 标题行右侧的小图标工具：循环模式 + 恢复默认排序（去胶囊，纯图标） */
.queue-heading-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.queue-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.queue-icon-btn .ui-icon {
  width: 20px;
  height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .queue-icon-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
  }
}

.queue-icon-btn:active {
  color: var(--accent-strong);
}

/* 循环模式按钮：图标 + 当前模式文字（列表循环/随机播放/单曲循环），紧凑无胶囊 */
.queue-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 9px 0 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.14s ease, color 0.14s ease;
}

.queue-mode-btn .ui-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.queue-mode-btn .queue-mode-label {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .queue-mode-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
  }
}

.queue-mode-btn:active {
  color: var(--accent-strong);
}

.queue-drawer-header .sort-hint {
  margin: 0 0 10px;
}

.queue-drawer .drawer-actions--queue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

/* 复位按钮智能隐身后只剩循环按钮，占满整行、不留空格、不与其它按钮重叠 */
.queue-drawer .drawer-actions--queue.single {
  grid-template-columns: 1fr;
}

.queue-drawer .queue-toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.queue-drawer .queue-toolbar-button.labeled-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.queue-drawer .queue-toolbar-button .ui-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.queue-drawer .queue-toolbar-button .button-label,
.queue-drawer .queue-toolbar-button .reset-order-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.queue-drawer .queue-toolbar-button .reset-order-label--short {
  display: none;
}

.utility-drawer {
  position: relative;
  width: min(620px, 100%);
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  background: rgba(7, 18, 32, 0.97);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.38);
}

.drawer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 50%;
  color: var(--accent-strong);
  line-height: 1;
}

.utility-drawer .drawer-head {
  padding-right: 42px;
}

.filename-tip {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 21, 38, 0.66);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.filename-tip span {
  color: var(--accent-strong);
  overflow-wrap: anywhere;
}

.utility-tip {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* 下载弹窗（音频/视频通用）：标题缩小、文件名提示去框成纯文字、三按钮一行等宽 */
#downloadOverlay .utility-drawer h2 {
  font-size: 16px;
  line-height: 1.45;
}

#downloadOverlay .utility-tip {
  margin: 0 0 6px;
  font-size: 13px;
}

#downloadOverlay .filename-tip {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
}

#downloadOverlay .player-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

#downloadOverlay .player-actions button,
#downloadOverlay .player-actions a {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  min-height: 36px;
  padding: 6px 4px;
  font-size: 13px;
  border-radius: 10px;
  white-space: nowrap;
}

/* 一行三按钮空间紧凑，图标省去、纯文字更清爽 */
#downloadOverlay .player-actions .ui-icon {
  display: none;
}

/* 下载是主操作，用强调色胶囊突出 */
#downloadOverlay #downloadPrimary {
  border-color: rgba(139, 216, 255, 0.45);
  background: rgba(139, 216, 255, 0.14);
  color: var(--accent-strong);
}

#copyTextArea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: rgba(4, 13, 26, 0.78);
  color: var(--accent-strong);
  font: inherit;
  line-height: 1.5;
  outline: none;
}

#copyTextArea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 216, 255, 0.12);
}

.video-frame {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #02050b;
}

/* 非全屏时弹幕设置图标不占栏位（入口在右上角三个点），全屏时恢复到栏内；面板锚点保留 */
.art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .artplayer-plugin-danmuku .apd-config {
  width: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .artplayer-plugin-danmuku .apd-config .apd-config-icon {
  display: none;
}

.artplayer-plugin-danmuku.dmk-config-open .apd-config {
  position: relative !important;
}

/* 面板显隐完全由 dmk-config-open 类接管：插件自带的悬停显示在触屏上会误开误关 */
.artplayer-plugin-danmuku:not(.dmk-config-open) .apd-config .apd-config-panel {
  display: none !important;
}

.artplayer-plugin-danmuku.dmk-config-open .apd-config-panel {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 「防止弹幕重叠」开关下架：渲染端已默认尽量防重叠，无需用户操心 */
.apd-config-panel .apd-anti-overlap {
  display: none !important;
}

/* 播放列表抽屉内部滚动不外溢到底下页面（抽屉与真实滚动区都拦） */
.queue-drawer,
.queue-list-scroll {
  overscroll-behavior: contain;
}

/* 设置面板改为从按钮向左展开：默认 left:0 向右伸 320px，横屏时会被浏览器网址栏挡住 */
.artplayer-plugin-danmuku .apd-config .apd-config-panel {
  left: auto !important;
  right: 0 !important;
}

/* 设置面板：B 站式底部抽屉，左右铺满。
   iOS 上视频层可能压过普通定位层导致面板"透明"，translateZ 强制独立合成层 + 高 z-index 兜底 */
.video-settings-sheet {
  position: fixed;
  z-index: 10050;
  transform: translateZ(0);
  opacity: 1 !important;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 70vh;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  background: #0b1322;
}

.vs-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vs-value {
  font-size: 12px;
  color: #e6efff;
}

/* 设置抽屉滑块：和音频播放器进度条同一套观感（细圆轨 + 已播填充 + 圆点拇指），
   不再用原生 accent-color 的大灰条。--vs-percent 由 buildSliderRow 维护 */
.vs-slider {
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.vs-slider::-webkit-slider-runnable-track {
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(139, 216, 255, 0.95) 0%,
    rgba(139, 216, 255, 0.95) var(--vs-percent, 0%),
    rgba(226, 246, 255, 0.26) var(--vs-percent, 0%),
    rgba(226, 246, 255, 0.26) 100%
  );
  transition: height 160ms ease;
}

.vs-slider::-webkit-slider-thumb {
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border: 0;
  border-radius: 50%;
  background: rgba(226, 246, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(139, 216, 255, 0.24);
  -webkit-appearance: none;
  appearance: none;
  transition: width 160ms ease, height 160ms ease, margin-top 160ms ease;
}

/* 拖动时轨道/拇指放大一档（同进度条 is-scrubbing 的反馈） */
.vs-slider:active::-webkit-slider-runnable-track {
  height: 5px;
}

.vs-slider:active::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  margin-top: -3px;
}

.vs-slider::-moz-range-track {
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: rgba(226, 246, 255, 0.26);
  transition: height 160ms ease;
}

.vs-slider::-moz-range-progress {
  height: 2px;
  border-radius: 999px;
  background: rgba(139, 216, 255, 0.95);
}

.vs-slider::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: rgba(226, 246, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(139, 216, 255, 0.24);
  transition: width 160ms ease, height 160ms ease;
}

.vs-slider:active::-moz-range-track,
.vs-slider:active::-moz-range-progress {
  height: 5px;
}

.vs-slider:active::-moz-range-thumb {
  width: 11px;
  height: 11px;
}

/* 弹幕编写条：点入口后浮在输入法上方（参照 B 站）——[A][输入][纸飞机]，A 展开字号/类型/颜色。
   底色与设置面板家族统一（黑 85%） */
.dmk-composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* 网页全屏时播放器被传送到 body 且 z-index 极高，编写条必须压在其上 */
  z-index: 100001;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.85);
  border-top: 0;
}

.dmk-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dmk-a {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: #9fb3d9;
  font-size: 14px;
  line-height: 1;
}

.dmk-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  /* 16px 起步：小于 16px 时 iOS 会自动放大整个页面 */
  font-size: 16px;
}

.dmk-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8bd8ff;
}

.dmk-send svg {
  width: 22px;
  height: 22px;
}

.dmk-settings {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.dmk-swatch {
  width: 34px;
  height: 24px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* 弹幕文字默认黑色描边，亮画面下也清晰；任何弹幕不带底色（自己的只有边框） */
.art-video-player .art-danmuku div {
  text-shadow: 1px 0 1px #000, -1px 0 1px #000, 0 1px 1px #000, 0 -1px 1px #000;
  background: none !important;
}

.dmk-swatch.is-active {
  border-color: #8bd8ff;
}

.vs-row {
  display: grid;
  gap: 6px;
}

.vs-label {
  font-size: 12px;
  color: #9fb3d9;
}

.vs-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vs-option {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 8px;
}

.vs-option.is-active {
  background: #8bd8ff;
  border-color: #8bd8ff;
  color: #06101f;
}

/* 全屏顶栏：左上返回（退出全屏）+ 本期标题，跟随控制条显隐（参照 B 站横屏） */
.art-video-player .art-fs-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(2, 5, 11, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.art-video-player.art-fullscreen .art-fs-header,
.art-video-player.art-fullscreen-web .art-fs-header {
  display: flex;
}

.art-video-player.art-fullscreen.art-control-show .art-fs-header,
.art-video-player.art-fullscreen-web.art-control-show .art-fs-header {
  opacity: 1;
  pointer-events: auto;
}

/* 画面中央三颗按钮：后退 10s / 播放暂停 / 前进 10s。
   容器必须 pointer-events:none（ArtPlayer 给 .art-layer 默认设的是 auto），
   否则整块盖在画面上，单击就打不到 video、唤出逻辑和播放器手势会一起失灵。
   隐藏态用 visibility 而不是只压 opacity：透明按钮仍可点，会变成看不见的雷 */
.art-video-player .jy-seek-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 三颗按钮（⏪ ⏸/▶ ⏩）等距排开；暂停时中键 visibility 隐藏但保留占位，
     位置让给自带的 .art-state 三角（绝对居中，正好落在同一个坑里）。
     min() 兜底：窄机型上不至于把按钮挤出画面 */
  gap: min(52px, 11vw);
  /* 控制层浮出时整幅画面压一层淡遮罩（油管/网飞同款）：
     白图标在纯白画面上真正读得清靠的是这层，而不是给每颗按钮套黑圈 */
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s;
}

/* 纯白图标 + 双层黑投影：不套底色圈。白图标压在纯白画面上会糊，
   主流播放器的解法是投影 + 控制层出现时整幅画面压一层淡遮罩（见下方 layer 的 background），
   两层一起才在纯白和纯黑画面上都读得清 */
.jy-seek-layer .jy-seek-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  opacity: var(--art-state-opacity, 0.8);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.65));
  pointer-events: auto;
  cursor: pointer;
}

.jy-seek-layer .ui-icon {
  width: calc(var(--art-state-size, 80px) * 0.72);
  height: calc(var(--art-state-size, 80px) * 0.72);
}

/* 中键比两侧大一号（沿用原 art-state 的 80px 档） */
.jy-seek-layer .jy-seek-play .ui-icon {
  width: var(--art-state-size, 80px);
  height: var(--art-state-size, 80px);
}

/* 中键随播放状态换图标：播放中 ⏸，暂停时 ▶ */
.jy-seek-layer .jy-mid-play,
.jy-seek-layer.jy-paused .jy-mid-pause {
  display: none;
}

.jy-seek-layer.jy-paused .jy-mid-play {
  display: inline-flex;
}

/* 双保险：就算注入的 svg 丢了 icon-svg 类，也强制撑满图标容器（手机 Safari 无尺寸 svg 会塌成 0） */
.jy-seek-layer .ui-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 自带的中央大三角藏死：它的显隐节奏（seek 时被摘、暂停才出现）跟两侧按钮对不齐，
   中央播放/暂停一律由浮层的中键（.jy-seek-play）接管，三颗同生同死 */
.art-video-player .art-mask .art-state.art-state {
  display: none !important;
}

/* 显隐分两种情况，谁都不跟谁打架：
   一、控制条由播放器自己管的状态（电脑端鼠标悬停、以及任意端全屏）——直接跟 art-control-show 走，
       等于 B 站那套：鼠标进画面就出来，静止几秒跟控制条一起隐；
   二、窄屏非全屏——控制条被 enforceControlShow 锁成常驻，跟着它走就会一直杵在画面中间，
       只能自己管：单击画面唤出、3 秒自动收（见 script.js）。
   隐藏一律用 visibility 而不是 display，免得布局反复重算 */
.art-video-player.art-fullscreen.art-control-show .jy-seek-layer,
.art-video-player.art-fullscreen-web.art-control-show .jy-seek-layer,
/* 暂停期间三颗常驻（B站/油管同款）：全屏里即便控制条被收掉也不藏 */
.art-video-player.art-fullscreen .jy-seek-layer.jy-paused,
.art-video-player.art-fullscreen-web .jy-seek-layer.jy-paused {
  opacity: 1;
  visibility: visible;
}

/* 触屏设备（手机+平板，宽度不限）：单击唤出/暂停常驻；桌面鼠标不在此列 */
@media (hover: none), (pointer: coarse) {
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web).jy-seek-show .jy-seek-layer,
  /* 暂停期间三颗常驻不自动收；恢复播放后回到「单击唤出 + 3 秒自动隐」 */
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .jy-seek-layer.jy-paused {
    opacity: 1;
    visibility: visible;
  }

  /* 网页全屏按钮触屏统一小尺寸：平板/手机横屏走宽布局时会漏出无约束的大图标 */
  .art-video-player .art-control-fullscreenWeb {
    flex: 0 0 auto;
    min-width: 32px;
    height: 32px;
    padding: 0 4px;
    border: 0;
  }

  .art-video-player .art-control-fullscreenWeb svg {
    width: 18px;
    height: 18px;
  }
}

/* 平板（触屏 + 宽视口）：手势跟手机，界面精简跟桌面——宽控制条里字幕/倍速/弹幕齐全，
   右上角齿轮多余；返回键胶囊底也去掉。手机横屏短暂进入此态，行为一致无妨 */
@media (hover: none) and (min-width: 701px), (pointer: coarse) and (min-width: 701px) {
  .video-sheet .video-more {
    display: none !important;
  }

  .video-sheet .close-button {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* 中央三颗按钮是触屏配件，鼠标设备一律不出（含全屏）：
   桌面全屏时鼠标必然悬在播放器上，ArtPlayer 会按住控制条不收，
   按钮组跟着就永驻挡画面；桌面本有 ←→ 键 ±10s、单击暂停、双击全屏 */
@media (hover: hover) and (pointer: fine) {
  .art-video-player .jy-seek-layer {
    display: none !important;
  }

  /* 桌面返回键去掉胶囊底，只留裸箭头（悬停给个淡淡的反馈就够） */
  .video-sheet .close-button {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .video-sheet .close-button:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* 桌面（鼠标设备）统一精简：
   1) 右上角齿轮一律隐藏——桌面已强制走宽布局，A̲/字幕/倍速全在控制条里；
   2) 竖向视频全屏时手机才需要把字幕/倍速让位给顶栏齿轮，桌面控制条宽敞，摆回条里；
   3) 全屏顶栏的齿轮（art-fs-gear）也随之多余 */
@media (hover: hover) and (pointer: fine) {
  .video-sheet .video-more {
    display: none !important;
  }

  /* 类名双写抬特异性：要压过后文同为 !important 的隐藏规则 */
  .art-video-player.jy-vertical.jy-vertical.art-fullscreen-web .jy-sub-btn,
  .art-video-player.jy-vertical.jy-vertical.art-fullscreen .jy-sub-btn {
    display: inline-flex !important;
    align-items: center;
  }

  .art-video-player.jy-vertical.jy-vertical.art-fullscreen-web .art-control-setting,
  .art-video-player.jy-vertical.jy-vertical.art-fullscreen .art-control-setting {
    display: flex !important;
  }

  .art-video-player .art-fs-gear {
    display: none !important;
  }
}

.art-fs-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.art-fs-back .icon-svg {
  width: 20px;
  height: 20px;
}

.art-fs-title {
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 网页全屏：时间移到进度条上方左侧（B 站同款）；隐藏多余的全屏开关按钮——退出统一走左上角返回 */
.art-video-player.art-fullscreen-web .art-control-fullscreenWeb {
  display: none !important;
}

.art-video-player.art-fullscreen-web .art-control-time {
  position: absolute;
  left: 16px;
  bottom: 58px;
  font-size: 12px;
  color: #fff;
}

/* 全屏控制条：设置齿轮已换成「倍速」文字按钮 */
.art-control-setting .jy-speed-label {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}

/* 「字幕」文字按钮（全屏控制条，倍速左边）；无字幕作品置灰不可点 */
.art-controls .jy-sub-btn {
  flex: 0 0 auto;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.art-controls .jy-sub-btn.is-disabled {
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* 视频字幕覆盖层：外层对齐画面实宽做定位居中；黑框宽度跟随字幕实际宽度（85% 黑底白字），
   贴画面底部盖住烧录字幕；超长自动折行 */
.art-video-player .jy-video-sub {
  position: absolute;
  z-index: 25;
  display: none;
  text-align: center;
  pointer-events: none;
}

.art-video-player .jy-video-sub .jy-video-sub-text {
  /* 多行共用一个黑框（宽度=最长一行），单行时仍贴文字宽度 */
  display: inline-block;
  max-width: 100%;
  padding: 3px 10px;
  box-sizing: border-box;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: break-word;
}

/* 设置面板里「暂无字幕」的置灰提示 */
.vs-muted {
  color: rgba(255, 255, 255, 0.4);
}

/* A̲ 按钮在全屏控制条内的样式（比竖屏胶囊里大一号，和 30px 输入胶囊、倍速按钮同比例） */
.art-controls .jy-dmk-a {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0 0 3px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 15px;
  line-height: 1;
}

.art-controls .jy-dmk-a::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

/* 进入网页全屏/全屏时必须去掉 overlay 的 backdrop-filter：该属性会把 fixed 定位困在弹窗内，导致全屏卡死无法退出 */
#videoOverlay:has(.art-fullscreen-web),
#videoOverlay:has(.art-fullscreen) {
  backdrop-filter: none;
}

/* 全屏时视频页自己的顶部返回/设置按钮让位（真机上会盖到全屏播放器上层）；
   用 body 类而不是 :has——播放器全屏时会被传送到 body 下，:has 探不到 */
body.jy-video-fs #closeVideo,
body.jy-video-fs #videoMoreBtn {
  display: none !important;
}

/* 竖向视频全屏：字幕/倍速交给顶栏齿轮，底部只留 播放|进度|时间|弹幕条，不再挤压溢出 */
.art-video-player.jy-vertical.art-fullscreen-web .jy-sub-btn,
.art-video-player.jy-vertical.art-fullscreen-web .art-control-setting,
.art-video-player.jy-vertical.art-fullscreen .jy-sub-btn,
.art-video-player.jy-vertical.art-fullscreen .art-control-setting {
  display: none !important;
}

/* 竖向全屏输入框收窄到 130px，弹幕开关开着整行也从容放下 */
.art-video-player.jy-vertical.art-fullscreen-web .art-controls .artplayer-plugin-danmuku .apd-emitter,
.art-video-player.jy-vertical.art-fullscreen .art-controls .artplayer-plugin-danmuku .apd-emitter {
  width: 130px !important;
  max-width: 130px !important;
}

/* 横向视频全屏：倍速/字幕面板改为贴右下角按钮的小弹窗，不再铺满整行
   （竖向全屏维持底部整条抽屉：入口在顶栏齿轮，小弹窗反而没锚点） */
.art-video-player.art-fullscreen-web:not(.jy-vertical) .video-settings-sheet,
.art-video-player.art-fullscreen:not(.jy-vertical) .video-settings-sheet {
  left: auto;
  right: 14px;
  bottom: 58px;
  width: auto;
  min-width: 230px;
  max-width: 340px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}

/* 竖向视频全屏顶栏的设置齿轮 */
.art-fs-header .art-fs-gear {
  flex: 0 0 auto;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}

.art-fs-header .art-fs-gear svg {
  width: 22px;
  height: 22px;
}

/* 窄屏下弹幕组件从控制条抽出为上方整行，否则控制条内容溢出、全屏按钮被挤出屏幕 */
/* 弹幕组件（控制条内或视频下方操作行内通用），输入框带深色底以便亮画面下辨识 */
.art-video-player .art-controls:has(.artplayer-plugin-danmuku) .art-controls-center {
  flex: 0 1 auto !important;
}

.art-controls .artplayer-plugin-danmuku,
.player-actions .artplayer-plugin-danmuku {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 8px;
  padding: 0;
  background: transparent;
}

/* 插件自带的「发送」「A字体样式」按钮全端隐藏：发送统一走回车/键盘，样式统一走 A̲ 按钮
   （此前只在手机端隐藏，电脑端露出来和 A̲ 重复、按钮拥挤） */
.artplayer-plugin-danmuku .apd-send,
.artplayer-plugin-danmuku .apd-style {
  display: none !important;
}

/* 全屏/宽屏控制条：弹幕整条靠右下贴设置按钮，从左到右 A̲｜输入框｜弹幕开关｜弹幕设置｜播放器设置
   （加 .art-video-player 提升优先级，压过手机端 margin 老规则，旋转全屏也能贴右） */
.art-video-player .art-controls .artplayer-plugin-danmuku {
  flex: 0 1 auto !important;
  /* 右缘留距 + 组内拉开间距：A̲｜输入｜弹幕设置｜开关不再挤成一团 */
  margin: 0 10px 0 auto !important;
  gap: 12px;
}

/* 「倍速」按钮离屏幕右边缘远一点，和弹幕开关之间也留出呼吸感 */
.art-video-player .art-controls .art-control-setting {
  margin-left: 6px;
  margin-right: 14px;
}

.art-video-player .art-controls .artplayer-plugin-danmuku .apd-emitter {
  /* 插件运行时注入的样式优先级更高，宽度必须 !important 压制；
     插件给容器自带小圆角灰底，会和内层输入胶囊叠成两个框，一并压掉 */
  flex: 0 0 auto;
  width: 200px !important;
  max-width: 200px !important;
  height: 30px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 0 !important;
}

/* 控制条内输入框：30px 圆角胶囊，和 A̲/开关同高不突兀（压过手机端 12px 字号规则） */
.art-video-player .art-controls .artplayer-plugin-danmuku .apd-input {
  height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
}

/* 全屏里关掉弹幕开关：输入框收起（竖屏由 700px 媒体规则管，横屏宽度超 700 需单独盖住） */
.art-video-player.art-fullscreen-web .artplayer-plugin-danmuku.dmk-off .apd-emitter,
.art-video-player.art-fullscreen .artplayer-plugin-danmuku.dmk-off .apd-emitter {
  display: none !important;
}

/* 「点我发弹幕 + 弹」椭圆胶囊：胶囊本身即输入框（16px 防 iOS 聚焦缩放） */
.player-actions .artplayer-plugin-danmuku {
  height: 32px;
  margin: 0 2px 0 4px;
  padding: 0 3px 0 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  gap: 0;
}

.player-actions .artplayer-plugin-danmuku .apd-emitter {
  background: transparent !important;
  border-radius: 0;
}

.player-actions .artplayer-plugin-danmuku .apd-input {
  height: 32px;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 16px;
  color: #cfe0ff;
  font-size: 16px;
  padding: 0 6px;
}

.player-actions .artplayer-plugin-danmuku .apd-input:focus {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* A̲ 弹幕样式设置按钮：胶囊内最左，字母+紧贴其下的横杠整体居中，颜色跟随所选弹幕色 */
.player-actions .jy-dmk-a {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-left: 4px;
  padding: 0 0 3px;
  border: 0;
  background: transparent;
  color: #9fb3d9;
  font-size: 13px;
  line-height: 1;
  order: 0;
}

.player-actions .jy-dmk-a::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.player-actions .artplayer-plugin-danmuku .apd-toggle {
  width: 28px;
  min-width: 28px;
}

/* 常驻行里保留输入位、弹字开关和弹幕显示设置（开关右侧）：发送靠键盘、颜色按服务端白名单 */
.player-actions .artplayer-plugin-danmuku .apd-send,
.player-actions .artplayer-plugin-danmuku .apd-style {
  display: none !important;
}

.player-actions .artplayer-plugin-danmuku .apd-config {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  cursor: pointer;
}

/* 弹幕关闭后显示设置也无意义：全端（竖屏胶囊/电脑/全屏控制条）都跟输入框一起收起，只留斜杠弹字 */
.artplayer-plugin-danmuku.dmk-off .apd-config {
  display: none !important;
}

/* 开关是同一个按钮切换图标：开=弹、关=斜杠弹（搬出播放器后插件自带切换样式失效，由 dmk-off 状态接管） */
.player-actions .apd-toggle {
  width: 32px;
  min-width: 32px;
  /* 和左边的弹幕设置按钮拉开一点距离，不挤在一起 */
  margin-left: 8px;
  cursor: pointer;
}

.player-actions .apd-toggle svg {
  display: none !important;
}

.player-actions .artplayer-plugin-danmuku:not(.dmk-off) .apd-toggle .apd-toggle-on {
  display: block !important;
}

.player-actions .artplayer-plugin-danmuku.dmk-off .apd-toggle .apd-toggle-off {
  display: block !important;
}

.artplayer-plugin-danmuku .apd-emitter {
  flex: 1 1 auto;
  min-width: 84px;
  max-width: 320px;
  order: 1;
}

.artplayer-plugin-danmuku.dmk-off .apd-emitter {
  min-width: 0;
}

/* 弹幕开关关闭时，A̲ 样式按钮一并隐藏（输入框已收起，样式设置无意义） */
.artplayer-plugin-danmuku.dmk-off .jy-dmk-a {
  display: none !important;
}

/* 开关放最右：关闭后只剩斜杠弹字时位置不动（设置按钮在它左边、关闭时随输入框一起收起） */
.artplayer-plugin-danmuku .apd-toggle {
  order: 3;
}

.artplayer-plugin-danmuku .apd-config {
  order: 2;
}

.artplayer-plugin-danmuku.dmk-off {
  justify-content: flex-end;
}

.artplayer-plugin-danmuku .apd-input {
  min-width: 0;
  width: 100%;
  height: 26px;
  padding: 0 10px;
  border-radius: 14px;
  background: rgba(6, 10, 22, 0.65);
  color: #fff;
}

/* 窄屏：控制条瘦身（去音量、设置功能并入右上角三个点），弹幕输入位紧凑不铺满；关闭弹幕只剩斜杠弹字 */
@media (max-width: 700px) {
  .art-video-player .art-control-volume,
  .art-video-player .art-control-fullscreen,
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .art-control-setting {
    display: none !important;
  }
  .art-video-player .art-controls .art-control {
    min-width: 34px;
    padding: 0 5px;
  }
  .art-video-player .art-control-time {
    font-size: 11px;
    padding: 0 4px;
  }
  .art-video-player .art-controls .artplayer-plugin-danmuku {
    margin: 0 4px;
  }
  /* 竖屏：控制带固定常驻在视频下方 40px 黑条内（不随点击显隐，按钮永远可点） */
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .art-controls {
    display: none !important;
  }
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .art-video {
    /* 视频区显式让出下方 40px 控制带：无论比例如何，控制带永不压画面；缩小后的画面居中 */
    height: calc(100% - 40px);
    object-fit: contain;
    object-position: center;
  }
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .art-bottom {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    top: auto !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    background: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  /* 视频区四角一律直角 */
  #videoOverlay .video-sheet,
  #videoOverlay .video-sheet .video-frame,
  #videoOverlay .video-sheet #videoPlayer,
  #videoOverlay .video-sheet .art-video-player {
    border-radius: 0 !important;
  }
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .art-bottom .art-progress {
    height: 22px;
    display: flex;
    align-items: center;
  }
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .art-bottom .art-control-progress {
    flex: 1 1 auto;
    width: 100%;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 2px;
  }
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .art-bottom .art-progress {
    flex: 1 1 auto;
    min-width: 0;
  }
  .art-video-player .art-bottom > .art-control-playAndPause {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 0 4px;
  }
  .art-video-player .art-bottom > .art-control-time {
    flex: 0 0 auto;
    font-size: 10px;
    padding: 0 6px 0 2px;
    white-space: nowrap;
  }
  .art-video-player .art-bottom > .art-control-fullscreenWeb {
    flex: 0 0 auto;
    min-width: 32px;
    height: 32px;
    padding: 0 4px;
    border: 0;
  }
  .art-video-player .art-bottom > .art-control-fullscreenWeb svg {
    width: 18px;
    height: 18px;
  }
  /* 进度条：拖动时锁定浏览器手势，滑块视觉缩小但点击热区不变 */
  .art-video-player .art-progress {
    touch-action: none;
  }
  .art-video-player .art-progress-indicator {
    background: transparent !important;
    box-shadow: none !important;
  }
  .art-video-player .art-progress-indicator svg {
    display: none;
  }
  .art-video-player .art-progress-indicator::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #8bd8ff;
  }
  /* 顶部返回/设置按钮融合：去胶囊感，标题区让出高度不压视频 */
  #videoOverlay .video-sheet {
    padding-top: 56px;
  }
  .video-sheet .close-button,
  .video-sheet .video-more {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  /* 视频下方常驻行：弹幕 + 下载/链接/评论 小按钮 */
  #videoOverlay .video-sheet .player-actions button,
  #videoOverlay .video-sheet .player-actions a {
    flex: 0 1 auto;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 0 8px;
    font-size: 12px;
  }
  #videoOverlay .video-sheet .player-actions {
    justify-content: flex-start;
  }
  #videoOverlay .video-sheet .player-actions {
    margin: 0 -10px;
    width: calc(100% + 20px);
    padding: 5px 12px;
  }
  #videoOverlay .video-sheet .player-actions button,
  #videoOverlay .video-sheet .player-actions a {
    font-size: 12px;
    padding: 0 8px;
  }
  /* 入口胶囊收缩为内容宽：A 最左、弹最右，小巧靠右；空间不足时（英文长文案）整体可收缩 */
  #videoOverlay .video-sheet .player-actions {
    flex-wrap: nowrap;
  }
  #videoOverlay .video-sheet .player-actions button,
  #videoOverlay .video-sheet .player-actions a {
    min-width: 0;
    white-space: nowrap;
  }
  #videoOverlay .player-actions .artplayer-plugin-danmuku {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0;
    height: 30px;
    border-radius: 15px;
    margin-left: auto;
  }
  #videoOverlay .player-actions .artplayer-plugin-danmuku .apd-emitter {
    /* 插件运行时注入 flex:0 0 auto 拒绝收缩，必须 !important 压制，否则英文长文案时开关被挤出屏 */
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none;
  }
  /* 输入位向左加宽吃掉与评论按钮之间的空白；英文/小屏时自动收缩，弹幕设置和开关保底不出屏 */
  #videoOverlay .player-actions .apd-input {
    flex: 0 1 150px;
    width: 150px;
    min-width: 56px;
    height: 30px;
  }
  /* 控制带：全员上下居中 + 呼吸间距，时间轴不顶满 */
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .art-bottom {
    gap: 8px;
    padding: 0 12px !important;
  }
  .art-video-player .art-bottom > .art-control-playAndPause {
    align-self: center;
    margin-right: 4px;
  }
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .art-bottom .art-progress {
    align-self: center;
    margin: 0 4px;
  }
  .art-video-player .art-bottom > .art-control-time {
    align-self: center;
    margin-right: 8px;
  }
  .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) .art-bottom > .art-control-fullscreenWeb {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
  }
  /* 视频左右铺满屏幕、去边框，高度随视频比例自适应 */
  #videoOverlay .video-sheet .video-frame {
    margin: 0 -10px;
    width: calc(100% + 20px);
    border: 0;
    border-radius: 0;
    height: auto;
    min-height: 0;
  }
  #videoOverlay .video-sheet #videoPlayer {
    aspect-ratio: auto;
    /* 竖屏视频超高时封顶：整体等比缩小、左右留边，保证下方 40px 控制带完整露出不吞画面 */
    height: min(calc(100vw * var(--vid-ratio, 0.5625) + 40px), calc(100vh - 160px));
    height: min(calc(100vw * var(--vid-ratio, 0.5625) + 40px), calc(100dvh - 160px));
  }
  .art-video-player .artplayer-plugin-danmuku .apd-send,
  .art-video-player .artplayer-plugin-danmuku .apd-style {
    display: none !important;
  }
  .art-video-player .art-controls .artplayer-plugin-danmuku .apd-emitter {
    max-width: 210px;
  }
  .art-video-player .artplayer-plugin-danmuku .apd-input {
    font-size: 12px;
  }
  .artplayer-plugin-danmuku.dmk-off .apd-emitter {
    display: none !important;
  }
}

/* 触屏设备：音量交给物理键，控制条不放音量按钮 */
@media (pointer: coarse) {
  .art-video-player .art-control-volume {
    display: none !important;
  }
}

/* 播放器自带的文字状态提示（Pause/Play 等）在自定义布局下会飘到黑边上，统一隐藏——播放键本身已表意 */
.art-video-player .art-notice {
  display: none !important;
}

/* 英文文案比中文长一倍：入口行按钮收紧、输入位改定宽收窄，保证开关/设置永远在屏内 */
@media (max-width: 700px) {
  html[lang="en"] #videoOverlay .video-sheet .player-actions button,
  html[lang="en"] #videoOverlay .video-sheet .player-actions a {
    padding: 0 6px !important;
  }
  html[lang="en"] #videoOverlay .player-actions .apd-input {
    flex: 0 1 72px !important;
    width: 72px !important;
    min-width: 44px !important;
  }
}

/* 超窄屏（SE 等）+ 英文长文案兜底：按钮再收一档 */
@media (max-width: 360px) {
  #videoOverlay .video-sheet .player-actions button,
  #videoOverlay .video-sheet .player-actions a {
    font-size: 11px;
    padding: 0 5px !important;
  }
  #videoOverlay .player-actions .apd-input {
    min-width: 44px;
  }
}

#videoPlayer {
  width: 100%;
  min-height: 0;
  height: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
  background: #02050b;
  object-fit: contain;
  transform-origin: center center;
}

/* 视频预览弹窗：隐藏分类/ID，关闭按钮固定右上角 */
#videoOverlay {
  padding: 0;
  background: #02050b;
  backdrop-filter: none;
}

.video-sheet {
  width: 100%;
  height: 100%;
  max-height: none;
  gap: 10px;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: #02050b;
  box-shadow: none;
}

.video-sheet #videoCategory {
  display: none;
}

/* z-index 必须高于 ArtPlayer 的 video 元素（自带 z-index:10）：
   电脑版 .video-frame 顶到 (12,12)，视频画面会盖住这两个按钮，
   只剩左/上边缘 3px 能点到，看得见点不着 */
.video-sheet .close-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  justify-self: auto;
  margin: 0;
}

.video-sheet .video-more {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  min-height: 36px;
  margin: 0;
}

.video-sheet .section-kicker {
  padding: 0 48px;
}

/* 标题固定在返回与齿轮之间并垂直对齐；过长时复用 title-marquee：起点停顿后单向左滚、无缝循环 */
.video-sheet #videoTitle {
  position: absolute;
  top: 10px;
  left: 54px;
  right: 54px;
  z-index: 1;
  margin: 0;
  padding: 0;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.video-sheet #videoTitle .vt-track {
  display: inline-flex;
  white-space: nowrap;
}

.video-sheet #videoTitle.is-marquee {
  text-align: left;
}

.video-sheet #videoTitle.is-marquee .vt-track {
  width: max-content;
  animation-name: title-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform: translate3d(0, 0, 0);
}

.video-sheet #videoTitle .vt-text,
.video-sheet #videoTitle .vt-clone {
  display: inline-block;
}

.video-sheet #videoTitle.is-marquee .vt-text,
.video-sheet #videoTitle.is-marquee .vt-clone {
  padding-right: 3em;
}

.video-sheet #videoTitle:not(.is-marquee) .vt-clone {
  display: none;
}

#videoOverlay .video-sheet .video-frame {
  border-radius: 12px 12px 0 0;
}

/* 操作栏与视频框融合成一张卡片（参照 B 站视频下方操作行），去掉大按钮的撕裂感 */
/* B 站式布局：上标题、中视频、下按钮行——按钮行无卡片框，只留一条上分隔线 */
#videoOverlay .video-sheet .player-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-self: start;
  gap: 4px;
  width: 100%;
  min-height: 0;
  height: auto;
  margin-top: 0;
  padding: 5px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

#videoOverlay .video-sheet .player-actions button,
#videoOverlay .video-sheet .player-actions a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-height: 36px !important;
  height: 36px !important;
  max-height: 36px !important;
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.2;
  align-self: center;
  pointer-events: auto;
}

/* 下载/评论只留文字（参照 B 站 tabs） */
#videoOverlay .video-sheet .player-actions .ui-icon {
  display: none !important;
}

#videoOverlay .video-sheet .player-actions {
  gap: 4px;
}

#videoOverlay .video-sheet .player-actions .button-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#videoOverlay #openVideoComments .ui-icon {
  width: 20px;
  height: 20px;
  margin-right: -1px;
}

.toast {
  position: fixed;
  z-index: 50;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, calc(100% - 36px));
  padding: 9px 16px;
  border: 0;
  border-radius: 6px;
  background: rgba(34, 50, 72, 0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast-text {
  line-height: 1.45;
}

.toast--success {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 22px rgba(139, 216, 255, 0.12);
}

.toast--warning {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 22px rgba(155, 140, 255, 0.1);
}

.toast-icon--success {
  color: var(--accent-strong);
}

.toast-icon--warning {
  color: var(--accent);
  opacity: 0.92;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 820px) {
  .app-shell {
    --mini-player-reserve: calc(148px + env(safe-area-inset-bottom, 0px));
    width: min(100% - 22px, 1040px);
    padding-top: 18px;
    padding-bottom: var(--mini-player-reserve);
  }

  .hero {
    gap: 10px;
  }

  .hero-main {
    gap: 10px;
  }

  .hero-avatar {
    width: 64px;
  }

  .hero-line {
    font-size: 21px;
  }

  .hero-subline {
    font-size: 14px;
  }

  h1 {
    font-size: 27px;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-head--channels {
    align-items: center;
    flex-direction: row;
  }

  .channels-title {
    max-width: calc(100% - 124px);
    font-size: 16px;
    letter-spacing: 0.06em;
  }

  .language-toggle {
    max-width: 88px;
    margin-right: 10px;
    min-height: 24px;
    font-size: 13px;
    padding-inline: 0;
  }

  .sticky-toolbar {
    min-height: 40px;
    gap: 8px;
    padding: 6px 0 8px;
  }

  .list-toolbar.sticky-toolbar {
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    padding-bottom: 10px;
  }

  .list-toolbar .toolbar-title {
    max-width: min(68vw, 360px);
  }

  .list-toolbar.sticky-toolbar::after {
    height: 10px;
  }

  #listView .work-rows {
    padding-top: 4px;
  }

  .toolbar-back {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 13px;
  }

  .toolbar-title h2 {
    font-size: 16px;
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .category-card {
    min-height: 84px;
    padding: 13px 12px;
  }

  .category-card strong {
    font-size: 14px;
    padding-right: 0;
  }

  .category-card small {
    position: static;
    font-size: 13px;
  }

  .work-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 8px;
    padding: 11px 0;
  }

  .work-row-detail {
    padding-left: 0;
  }

  .work-row-detail .row-actions {
    justify-content: space-between;
    gap: 3px;
  }

  .work-row .row-title {
    font-size: 15px;
  }

  .work-row .row-actions button,
  .work-row .row-actions a {
    flex: 1 1 0;
    max-width: none;
    min-height: 36px;
    padding: 7px 2px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(226, 244, 255, 0.9);
    font-size: 12px;
  }

  /* 手机上只保留按下瞬间的反馈：hover 在 iOS 会粘住，松手后按钮还亮着 */
  .work-row .row-actions button:active,
  .work-row .row-actions a:active {
    background: rgba(139, 216, 255, 0.05);
    border-color: transparent;
  }

  .work-row .row-actions button:focus,
  .work-row .row-actions a:focus {
    outline: none;
    background: transparent;
  }

  .work-row .row-actions .labeled-icon-button {
    gap: 3px;
  }

  .work-row .row-actions .ui-icon {
    opacity: 0.96;
  }

  .mini-player {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 8px;
    gap: 6px;
  }

  .mini-main {
    min-height: 42px;
    padding: 5px 6px;
  }

  .mini-controls {
    gap: 6px;
  }

  .icon-button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .primary-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .mini-controls .primary-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .mini-controls #miniPlay .ui-icon,
  .mini-controls .primary-icon .ui-icon {
    width: 24px;
    height: 24px;
  }

  .drawer-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .drawer-actions {
    width: 100%;
  }

  .drawer-actions button {
    flex: 1 1 auto;
  }

  .queue-drawer-header {
    padding-right: 34px;
  }

  .queue-drawer-top {
    gap: 8px;
    margin-bottom: 8px;
  }

  .queue-drawer-header .sort-hint {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .queue-drawer .drawer-actions--queue {
    gap: 4px;
  }

  .queue-drawer .drawer-actions--queue .queue-toolbar-button {
    flex: none;
    height: 42px;
    min-height: 42px;
    padding: 0 6px;
    font-size: 12px;
  }

  .queue-drawer .queue-toolbar-button .reset-order-label--long {
    display: none;
  }

  .queue-drawer .queue-toolbar-button .reset-order-label--short {
    display: inline;
  }

  .player-sheet,
  .video-sheet {
    padding: 18px;
  }

  .video-sheet {
    gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    max-height: none;
  }

  .video-sheet .close-button {
    top: 8px;
    right: 8px;
  }

  .video-sheet #videoTitle {
    padding-right: 44px;
    font-size: 17px;
  }

  #videoOverlay .video-sheet .player-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 42px;
    gap: 8px;
  }

  #videoOverlay .video-sheet .player-actions button,
  #videoOverlay .video-sheet .player-actions a {
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    padding: 0 10px;
    font-size: 14px;
  }

  #videoOverlay #videoPlayer {
    max-height: none;
  }

  .marquee-text {
    font-size: 19px;
  }

  .mini-player .mini-title-marquee .marquee-text,
  .mini-player .mini-title-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
  }

  .player-controls {
    max-width: 100%;
    gap: 4px;
    padding: 0 2px;
  }

  .player-controls-aux {
    max-width: 100%;
    padding: 0;
  }

  .player-controls-aux .subtitle-toggle-button .button-label {
    font-size: 13px;
  }

  .player-controls-aux .subtitle-toggle-button .cc-main {
    font-size: 13px;
  }

  .player-controls-aux .subtitle-toggle-button .cc-state {
    font-size: 11px;
  }

  .player-aux-btn,
  .player-controls-aux .sleep-timer-button,
  .player-controls-aux .playback-rate-select,
  .player-controls-aux .subtitle-toggle-button {
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    font-size: 13px;
    padding: 0 6px;
  }

  .player-controls-aux .sleep-timer-label {
    font-size: 13px;
  }

  .player-controls-aux .player-control-download {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    flex: 0 0 30px;
    padding: 0;
  }

  .player-controls-aux .player-control-download .ui-icon,
  .player-controls-aux .player-full-download-icon {
    width: 16px;
    height: 16px;
  }

  .player-controls-aux .subtitle-toggle-button .ui-icon {
    display: none;
  }

  .player-control-bar {
    max-width: 100%;
  }

  .player-stage {
    --player-stage-size: min(200px, 52vw);
    --subtitle-vignette-width: min(102%, 100%);
    --subtitle-vignette-height: 196px;
    --subtitle-text-max-width: 100%;
  }

  .player-stage .subtitle-panel {
    /* 字幕已移到展示区底部（弹幕飘上面），手机端不再回到中间 */
    top: auto;
    bottom: 2%;
    padding: 0 6px;
  }

  .player-stage .subtitle-panel::before {
    filter: blur(5px);
  }

  .subtitle-line--current {
    font-size: 17px;
    line-height: 1.48;
  }

  .player-title-marquee .marquee-text {
    font-size: 17px;
  }

  .player-ghost-control {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .player-ghost-control .ui-icon {
    width: 22px;
    height: 22px;
  }

  .player-main-play {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
  }

  .player-main-play .ui-icon {
    width: 28px;
    height: 28px;
  }

}

/* 完整播放器两行控制区：辅助行 + 主控制行 */
.player-controls-aux .sleep-timer-wrap {
  flex: 0 0 auto !important;
}

#sleepTimerButton.sleep-timer-button {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--accent-strong) !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#sleepTimerButton.sleep-timer-button.is-active {
  color: var(--accent) !important;
}

#sleepTimerButton .sleep-timer-icon-wrap,
#sleepTimerButton svg.sleep-timer-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px !important;
  display: inline-flex !important;
  line-height: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
}

#sleepTimerButton .sleep-timer-icon-wrap svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px !important;
  color: inherit !important;
}

#sleepTimerButton .sleep-timer-label {
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 14px !important;
  flex: 0 0 auto !important;
  color: inherit !important;
}

#sleepTimerButton svg.sleep-timer-icon path {
  fill: currentColor !important;
}

.player-controls-aux #downloadCurrentAudio.player-control-download {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--accent-strong) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.player-controls-aux #downloadCurrentAudio .button-label {
  display: none !important;
}

.player-controls-aux #downloadCurrentAudio svg,
.player-controls-aux #downloadCurrentAudio .ui-icon,
.player-controls-aux #downloadCurrentAudio .player-full-download-icon {
  display: block !important;
  color: inherit !important;
}

.player-controls-aux #downloadCurrentAudio .player-full-download-icon path {
  fill: currentColor !important;
}

.player-controls-aux #subtitleToggle.subtitle-toggle-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.player-controls-aux #subtitleToggle.subtitle-toggle-button[aria-pressed="true"] {
  background: transparent !important;
  color: var(--accent-strong) !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .player-controls-aux #subtitleToggle.subtitle-toggle-button:hover:not(:disabled),
  .player-controls-aux #subtitleToggle.subtitle-toggle-button[aria-pressed="true"]:hover:not(:disabled) {
    background: transparent !important;
  }
}

.player-controls-aux #playbackRateSelect.playback-rate-select,
.player-controls-aux #playbackRateSelect.playback-rate-select:focus,
.player-controls-aux #playbackRateSelect.playback-rate-select:active {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
  min-width: 42px !important;
  max-width: 52px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  font-size: 13px !important;
  font-weight: 650;
}

.player-controls-aux #sleepTimerButton.sleep-timer-button {
  display: inline-flex !important;
}

@media (max-width: 520px) {
  .player-controls-aux #sleepTimerButton.sleep-timer-button {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 6px !important;
  }

  .player-controls-aux #sleepTimerButton .sleep-timer-label {
    font-size: 13px !important;
  }

  .player-controls-aux #subtitleToggle.subtitle-toggle-button {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 4px !important;
    font-size: 13px !important;
  }

  .player-stage:not(.subtitles-active) .player-art {
    top: -6%;
    left: 3%;
    width: 94%;
    height: 94%;
  }
}

@media (max-width: 360px) {
  .category-grid {
    grid-template-columns: 1fr;
  }
}

/* Full-page player and lightweight comments entry. */
#playerOverlay.overlay {
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 14%, rgba(139, 216, 255, 0.16), transparent 22rem),
    radial-gradient(circle at 86% 86%, rgba(155, 140, 255, 0.12), transparent 24rem),
    rgba(0, 5, 13, 0.94);
}

#playerOverlay .player-sheet {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  align-content: space-between;
  justify-items: stretch;
  gap: clamp(12px, 2.3vh, 22px);
  padding: calc(16px + env(safe-area-inset-top)) clamp(18px, 4vw, 34px) calc(18px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.player-page-head-button.player-back-button {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  left: clamp(14px, 4vw, 28px);
  z-index: 4;
}

#playerOverlay .close-button {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: clamp(14px, 4vw, 28px);
  z-index: 4;
  justify-self: auto;
}

.player-page-head-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(235, 249, 255, 0.9);
}

#playerOverlay #backPlayer,
#playerOverlay #closePlayer {
  top: calc(18px + env(safe-area-inset-top));
  height: 40px;
  min-height: 40px;
  line-height: 0;
}

#playerOverlay #backPlayer {
  width: auto;
  min-width: 68px;
  gap: 5px;
  padding: 0 11px;
  border: 1px solid rgba(139, 216, 255, 0.13);
  border-radius: 999px;
  background: rgba(9, 22, 39, 0.18);
  line-height: 1;
}

#playerOverlay #backPlayer .ui-icon {
  width: 20px;
  height: 20px;
}

#playerOverlay #backPlayer .button-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

#playerOverlay #closePlayer {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid rgba(139, 216, 255, 0.13);
  background: rgba(9, 22, 39, 0.18);
  color: rgba(235, 249, 255, 0.84);
  opacity: 0.9;
}

#playerOverlay #closePlayer .ui-icon {
  width: 17px;
  height: 17px;
}

@media (hover: hover) and (pointer: fine) {
  #playerOverlay #closePlayer:hover {
    background: rgba(139, 216, 255, 0.08);
    opacity: 0.95;
  }
}

@media (hover: hover) and (pointer: fine) {
  .player-page-head-button:hover {
    background: rgba(139, 216, 255, 0.08);
  }
}

#playerOverlay .player-stage {
  --player-stage-size: min(300px, 64vw, 34vh);
  margin-top: clamp(64px, 10vh, 104px);
}

#playerOverlay .player-meta {
  display: grid;
  gap: 8px;
  width: min(520px, 100%);
  margin-inline: auto;
  text-align: left;
}

#playerOverlay .player-title-marquee .marquee-text {
  /* 定稿：比原版小一号（原版实际 22.5px） */
  font-size: clamp(19px, 5vw, 21px);
  line-height: 1.3;
}

/* 跑马灯首尾间隔加宽到 6 字宽：两个半区同加 padding-right，-50% 循环才无缝不跳帧 */
#playerOverlay .player-title-marquee.is-marquee .marquee-text,
#playerOverlay .player-title-marquee.is-marquee .marquee-text--clone {
  padding-right: 4em;
}

/* 功能行与标题收紧成组；铺满与标题同宽（原本 380px 居中导致左右基线不齐），
   首项贴左基线、评论贴右基线 */
#playerOverlay .player-controls-aux {
  max-width: none;
  margin-top: -14px;
  /* 五等分列：两端贴左右基线，中间三个等距对称（原列宽不均导致中排歪斜） */
  grid-template-columns: repeat(5, 1fr) !important;
  justify-items: center;
  /* 整行向中间收一点，不顶边 */
  padding-inline: 12px;
}

/* 进度条 + 时间行同步向中间收，与功能行保持同一内缩基线 */
#playerOverlay .progress-area {
  padding-inline: 12px;
}

/* 标题框（含弹幕胶囊）同一内缩基线：标题左缘对定时、胶囊右缘对评论 */
#playerOverlay .player-meta {
  padding-inline: 12px;
}

/* 主控行：改为弹性等距分布——相邻按钮"边缘到边缘"的间隙完全一致
   （原五等分格子只对齐中心点，播放键带大圆环导致左右间隙看着不均） */
#playerOverlay .player-control-bar {
  max-width: none;
  padding-inline: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 光学对齐：外侧两键的按钮盒比图标大一圈（52px 盒装 25px 图标），
   盒对齐≠墨迹对齐——把外侧按钮外推半个空腔，让图标墨迹落在与上方各行同一条基线上 */
#playerOverlay .player-control-bar > :first-child {
  margin-left: -13px;
}

#playerOverlay .player-control-bar > :last-child {
  margin-right: -14px;
}

/* 标题以【《「等全角框类符号开头时悬挂半字：框类字形只占右半格，
   不悬挂会显得整行往里缩了半个字 */
#playerOverlay .player-title-marquee.hang-punct {
  margin-left: -0.5em;
}

#playerOverlay .player-controls-aux .sleep-timer-wrap {
  /* 外层贴左还不够：wrap 内部还有一层居中，必须一起改掉才能对齐左基线 */
  justify-self: start !important;
  justify-content: flex-start !important;
}

#playerOverlay .player-controls-aux .sleep-timer-button {
  padding-left: 0 !important;
}

#playerOverlay .player-controls-aux .comment-toggle-button {
  justify-self: end !important;
  margin-right: 0;
}

/* 明暗分层（参照 QQ音乐/网易云）：功能行降一档、时间行最暗最小、主控行三核心键保持最亮 */
#playerOverlay .player-controls-aux .player-aux-btn {
  color: rgba(230, 239, 255, 0.72) !important;
}

#playerOverlay .time-row > span {
  font-size: 12px;
  color: rgba(230, 239, 255, 0.55);
}

#playerOverlay #modeButton,
#playerOverlay #queueButton {
  opacity: 0.68;
}

/* CC 精简成单标（语言状态藏起来，点开菜单再选） */
.subtitle-toggle-button .cc-state {
  display: none !important;
}

/* 全站导航按钮统一无框：播放页返回/关闭 + 列表页返回分类 */
#playerOverlay .player-back-button,
#playerOverlay .close-button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.list-toolbar .toolbar-back {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#playerOverlay .player-meta-line {
  display: block;
}

#playerOverlay .player-meta-kicker {
  color: rgba(139, 216, 255, 0.88);
  font-size: 13px;
  line-height: 1.35;
}

#playerOverlay .player-controls {
  width: min(520px, 100%);
  max-width: 520px;
  gap: clamp(14px, 2.5vh, 22px);
  transform: translateY(-8px);
}

#playerOverlay .player-controls-aux {
  grid-template-columns: minmax(54px, 1fr) minmax(42px, 0.82fr) minmax(34px, 0.72fr) minmax(58px, 1fr) minmax(34px, 0.72fr);
  max-width: 100%;
  gap: 4px;
  margin-bottom: 0;
}

#playerOverlay .player-controls-aux .sleep-timer-wrap,
#playerOverlay .player-controls-aux .playback-rate-wrap,
#playerOverlay .player-controls-aux .player-control-download,
#playerOverlay .player-controls-aux .subtitle-menu-wrap,
#playerOverlay .player-controls-aux .comment-toggle-button {
  grid-column: auto;
  justify-self: center;
}

#playerOverlay .player-controls-aux .comment-toggle-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-strong);
  font-size: 14px;
  box-shadow: none;
}

#playerOverlay .player-controls-aux .sleep-timer-label,
#playerOverlay .player-controls-aux .playback-rate-select,
#playerOverlay .player-controls-aux #downloadCurrentAudio .button-label,
#playerOverlay .player-controls-aux .subtitle-toggle-button .button-label,
#playerOverlay .player-controls-aux .comment-toggle-button .button-label {
  font-size: 13px !important;
  line-height: 1;
}

#playerOverlay .comment-toggle-button .ui-icon {
  width: 22px;
  height: 22px;
  transform: translate(-3px, 2px);
}

#playerOverlay .comment-toggle-button .icon-svg,
.player-controls-aux .comment-toggle-button .icon-svg {
  display: block;
  fill: none;
  stroke: currentColor;
  opacity: 0.86;
}

#playerOverlay .player-controls-aux .sleep-timer-icon-wrap,
#playerOverlay .player-controls-aux .sleep-timer-icon,
#playerOverlay .player-controls-aux #sleepTimerButton .sleep-timer-icon-wrap,
#playerOverlay .player-controls-aux #sleepTimerButton .sleep-timer-icon-wrap svg {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  max-width: 19px !important;
  max-height: 19px !important;
  flex-basis: 19px !important;
}

#playerOverlay .player-controls-aux #downloadCurrentAudio.player-control-download {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  gap: 0;
  padding: 0 !important;
}

#playerOverlay .player-controls-aux #downloadCurrentAudio .button-label {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
}

#playerOverlay .player-controls-aux #downloadCurrentAudio .ui-icon,
#playerOverlay .player-controls-aux #downloadCurrentAudio .player-full-download-icon,
#playerOverlay .player-controls-aux .subtitle-toggle-button .ui-icon {
  width: 19px !important;
  height: 19px !important;
}

.comment-count-pill {
  position: absolute;
  top: 6px;
  left: 21px;
  z-index: 2;
  isolation: isolate;
  min-width: 0;
  height: auto;
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(226, 246, 255, 0.94);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  box-shadow: none;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
}

.comment-count-pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 2px;
  background: rgba(8, 13, 29, 0.94);
}

.comment-count-pill[hidden] {
  display: none !important;
}

#playerOverlay .progress-area {
  --progress-track-height: 2px;
  --progress-thumb-size: 8px;
  width: min(520px, 100%);
  margin-inline: auto;
  margin-top: 0;
}

#playerOverlay .progress-area.is-scrubbing {
  --progress-track-height: 5px;
  --progress-thumb-size: 11px;
}

/* 时间行与主控行对齐：5 等分，后退15/前进15 落在上一首/下一首正上方 */
#playerOverlay .time-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  column-gap: 0;
}

#playerOverlay .time-row #currentTime {
  grid-column: 1;
  justify-self: start;
}

#playerOverlay .time-row #durationTime {
  grid-column: 5;
  justify-self: end;
}

#playerOverlay .skip-seek-btn {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  width: auto;
  height: 36px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: rgba(226, 246, 255, 0.7);
  cursor: pointer;
  transform: translateX(-6px);
  transition: color 140ms ease;
  -webkit-tap-highlight-color: transparent;
}

#playerOverlay .skip-seek-btn .skip-num {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}

#playerOverlay .skip-seek-btn.skip-forward {
  grid-column: 4;
  transform: translateX(6px);
}

@media (hover: hover) and (pointer: fine) {
  #playerOverlay .skip-seek-btn:hover {
    color: rgba(226, 246, 255, 0.92);
  }
}

#playerOverlay .skip-seek-btn:active {
  color: #e2f6ff;
  transform: translateX(-6px) scale(0.92);
}

#playerOverlay .skip-seek-btn.skip-forward:active {
  transform: translateX(6px) scale(0.92);
}

#playerOverlay .skip-seek-btn .ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#playerOverlay .skip-seek-btn svg {
  height: 9px;
  width: auto;
  display: block;
}

/* 一次性新功能提示弹窗（快退/快进 15 秒） */
.seek-tip-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 12, 22, 0.64);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: seekTipFade 200ms ease;
}

.seek-tip-overlay.hidden {
  display: none;
}

.seek-tip-card {
  width: min(340px, 100%);
  box-sizing: border-box;
  background: #101a2c;
  border: 1px solid rgba(139, 216, 255, 0.24);
  border-radius: 18px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.5);
  animation: seekTipPop 220ms ease;
}

.seek-tip-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.seek-tip-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(139, 216, 255, 0.1);
  color: rgba(226, 246, 255, 0.92);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.seek-tip-chip svg {
  height: 11px;
  width: auto;
  display: block;
}

.seek-tip-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: #eaf6ff;
}

.seek-tip-body {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(226, 246, 255, 0.72);
}

.seek-tip-btn {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(139, 216, 255, 0.95);
  color: #04243a;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.seek-tip-btn:active {
  transform: scale(0.98);
}

/* 最新更新弹窗（复用 seek-tip 卡片底子） */
.update-tip-overlay {
  z-index: 201;
}

.update-tip-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(139, 216, 255, 0.12);
  color: rgba(139, 216, 255, 0.95);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 14px;
}

.update-tip-title {
  line-height: 1.4;
}

.update-tip-body {
  font-size: 13px;
  color: rgba(226, 246, 255, 0.6);
  margin-bottom: 20px;
}

.seek-tip-btn-ghost {
  width: 100%;
  margin-top: 9px;
  padding: 11px;
  border: 1px solid rgba(226, 246, 255, 0.16);
  border-radius: 12px;
  background: transparent;
  color: rgba(226, 246, 255, 0.62);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.seek-tip-btn-ghost:active {
  transform: scale(0.98);
}

@keyframes seekTipFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes seekTipPop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#playerOverlay #progressBar {
  height: 36px;
  margin: 0;
  padding: 16px 0;
  accent-color: var(--accent-strong);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

#playerOverlay #progressBar:focus,
#playerOverlay #progressBar:focus-visible,
#playerOverlay #progressBar:active {
  border: 0;
  box-shadow: none;
  outline: none;
  background: transparent;
}

#playerOverlay #progressBar::-webkit-slider-runnable-track {
  height: var(--progress-track-height);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  background: linear-gradient(
    to right,
    rgba(139, 216, 255, 0.95) 0%,
    rgba(139, 216, 255, 0.95) var(--progress-percent, 0%),
    rgba(226, 246, 255, 0.26) var(--progress-percent, 0%),
    rgba(226, 246, 255, 0.26) 100%
  );
  transition: height 160ms ease;
}

#playerOverlay #progressBar::-webkit-slider-thumb {
  width: var(--progress-thumb-size);
  height: var(--progress-thumb-size);
  margin-top: calc((var(--progress-track-height) - var(--progress-thumb-size)) / 2);
  border: 0;
  border-radius: 50%;
  background: rgba(226, 246, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(139, 216, 255, 0.24);
  -webkit-appearance: none;
  appearance: none;
  transition: width 160ms ease, height 160ms ease, margin-top 160ms ease;
}

#playerOverlay #progressBar::-moz-range-track {
  height: var(--progress-track-height);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  background: rgba(226, 246, 255, 0.26);
  transition: height 160ms ease;
}

#playerOverlay #progressBar::-moz-range-progress {
  height: var(--progress-track-height);
  border-radius: 999px;
  background: rgba(139, 216, 255, 0.95);
  transition: height 160ms ease;
}

#playerOverlay #progressBar::-moz-range-thumb {
  width: var(--progress-thumb-size);
  height: var(--progress-thumb-size);
  border: 0;
  border-radius: 50%;
  background: rgba(226, 246, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(139, 216, 255, 0.24);
  transition: width 160ms ease, height 160ms ease;
}

#playerOverlay #progressBar:focus::-webkit-slider-runnable-track,
#playerOverlay #progressBar:active::-webkit-slider-runnable-track,
#playerOverlay #progressBar:focus::-moz-range-track,
#playerOverlay #progressBar:active::-moz-range-track {
  border: 0;
  box-shadow: none;
}

#playerOverlay .player-control-bar {
  max-width: 520px;
  transform: translateY(-4px);
  align-items: center;
}

#playerOverlay .player-ghost-control {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
}

#playerOverlay .player-ghost-control .ui-icon {
  width: 31px;
  height: 31px;
}

#playerOverlay #queueButton .ui-icon {
  width: 25px;
  height: 25px;
  transform: translateY(2px);
}

#playerOverlay #modeButton .ui-icon {
  width: 27px;
  height: 27px;
}

#playerOverlay .player-main-play {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
}

#playerOverlay .player-main-play .ui-icon {
  width: 38px;
  height: 38px;
}

.comments-page {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(2, 6, 13, 0.98);
  color: var(--text);
}

.comments-shell {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(720px, 100%);
  height: 100vh;
  height: 100dvh;
  margin-inline: auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow: hidden;
}

.comments-head {
  position: relative;
  display: block;
  min-height: 44px;
}

.comments-head h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  pointer-events: none;
}

.comments-back {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(235, 249, 255, 0.9);
}

.comments-work {
  display: grid;
  gap: 4px;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(139, 216, 255, 0.1);
}

.comments-work-title,
.comments-work-meta {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comments-work-title {
  font-size: 16px;
  font-weight: 700;
}

.comments-work-meta {
  color: var(--muted);
  font-size: 12px;
}

.drift-bottle-entry {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 88px;
  min-height: 44px;
  padding: 0 1px 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(165, 224, 246, 0.94);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-shadow: 0 0 14px rgba(139, 216, 255, 0.18);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.drift-bottle-entry::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 7px;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 216, 255, 0.46));
  opacity: 0.7;
  transition: opacity 0.2s ease, width 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .drift-bottle-entry:hover {
    color: rgba(218, 247, 255, 0.98);
    text-shadow: 0 0 18px rgba(139, 216, 255, 0.28);
  }
}

@media (hover: hover) and (pointer: fine) {
  .drift-bottle-entry:hover::after {
    width: 72px;
    opacity: 1;
  }
}

.drift-bottle-entry__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  line-height: 1;
}

.drift-bottle-entry__svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.drift-bottle-entry__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comments-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 14px 0 8px;
}

.comments-total {
  flex-shrink: 0;
  color: rgba(235, 249, 255, 0.92);
  font-size: 15px;
  font-weight: 700;
}

.comments-sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.comments-sort-button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
}

.comments-sort-button.is-active {
  color: var(--accent-strong);
  background: rgba(139, 216, 255, 0.1);
}

.comments-list {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}

.comment-item {
  display: grid;
  gap: 7px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(139, 216, 255, 0.08);
}

.comment-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 7px;
  min-width: 0;
}

.comment-name {
  max-width: 42vw;
  overflow: hidden;
  color: rgba(239, 250, 255, 0.96);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-name--reply {
  max-width: 34vw;
  font-size: 13px;
}

.comment-code {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 11px;
}

.comment-time {
  color: var(--dim);
  font-size: 11px;
  white-space: nowrap;
}

.comment-body {
  margin: 0;
  color: rgba(238, 248, 255, 0.94);
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.comment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: max-content;
  padding-top: 0;
  line-height: 1;
}

.comment-action {
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

.comment-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(193, 210, 221, 0.82);
  font-size: 14px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}

.comment-like-action {
  align-items: center;
  gap: 4px;
  min-width: auto;
  font-size: 12px;
}

.comment-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  color: currentColor;
  line-height: 0;
}

.comment-action-icon .icon-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.comment-like-action .comment-action-icon {
  width: 20px;
  height: 20px;
}

.comment-action-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .comment-icon-action:hover {
    background: transparent;
    color: var(--accent-strong);
  }
}

.comment-icon-action.is-liked {
  background: transparent;
  color: var(--accent-strong);
}

@media (hover: hover) and (pointer: fine) {
  .comment-action:hover {
    background: transparent;
    color: var(--accent-strong);
  }
}

.comment-action--danger {
  align-self: start;
  margin-top: 2px;
  color: rgba(255, 143, 143, 0.86);
}

.comment-body-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.comment-body-row--reply {
  gap: 8px;
}

.comment-reply-target {
  grid-column: 1 / -1;
  color: rgba(139, 216, 255, 0.74);
  font-size: 12px;
  line-height: 1.35;
}

.comment-text-wrap {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.comment-replies-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-self: start;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(139, 216, 255, 0.72);
  font-size: 12px;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .comment-replies-toggle:hover {
    color: var(--accent-strong);
  }
}

.comment-replies-toggle:focus,
.comment-replies-toggle:active {
  background: transparent;
  outline: none;
}

.comment-replies-toggle:focus-visible {
  outline: 1px solid rgba(139, 216, 255, 0.5);
  outline-offset: 2px;
}

.comment-replies {
  display: grid;
  gap: 8px;
  margin-top: 1px;
  padding: 8px 0 0 18px;
  border-left: 1px solid rgba(139, 216, 255, 0.14);
  background: transparent;
}

.comment-reply-item {
  display: grid;
  gap: 5px;
  padding: 5px 0 8px;
}

.comment-reply-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.comment-reply-body {
  margin: 0;
  color: rgba(226, 241, 250, 0.92);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.comment-body,
.comment-reply-body {
  white-space: pre-wrap;
}

.comment-body.is-folded,
.comment-reply-body.is-folded {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.comment-text-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-self: start;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(139, 216, 255, 0.72);
  font-size: 12px;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .comment-text-toggle:hover {
    color: var(--accent-strong);
  }
}

.comment-text-toggle:focus,
.comment-text-toggle:active {
  background: transparent;
  outline: none;
}

.comment-text-toggle:focus-visible {
  outline: 1px solid rgba(139, 216, 255, 0.5);
  outline-offset: 2px;
}

.comment-toggle-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.92;
}

.comment-toggle-icon .icon-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.comment-reply-body strong {
  color: var(--accent);
  font-weight: 700;
}

.comments-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  color: var(--muted);
  font-size: 14px;
}

.comment-form {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(139, 216, 255, 0.12);
}

.comment-nickname-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.comment-nickname,
.comment-input-row textarea {
  width: 100%;
  border: 1px solid rgba(139, 216, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 16px;
  outline: none;
}

.comment-nickname {
  min-height: 38px;
  padding: 8px 12px;
}

.comment-nickname-random {
  position: relative;
  z-index: 2;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(139, 216, 255, 0.18);
  border-radius: 12px;
  background: rgba(139, 216, 255, 0.1);
  color: var(--accent-strong);
  font-size: 13px;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .comment-nickname-random:hover {
    background: rgba(139, 216, 255, 0.16);
  }
}

.comment-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.comment-input-row textarea {
  min-height: 44px;
  max-height: 120px;
  resize: vertical;
  padding: 11px 12px;
  line-height: 1.45;
}

.comment-input-row button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: rgba(139, 216, 255, 0.16);
  color: var(--accent-strong);
  font-weight: 700;
}

@media (max-width: 520px) {
  #playerOverlay .player-sheet {
    gap: 10px;
  }

  #playerOverlay .player-controls {
    transform: translateY(-10px);
  }

  #playerOverlay .player-stage {
    --player-stage-size: min(240px, 62vw, 30vh);
    margin-top: 76px;
  }

  #playerOverlay .player-controls-aux {
    gap: 4px;
    margin-bottom: 6px;
  }

  #playerOverlay .player-title-marquee .marquee-text {
    /* 与主规则同步（此条在文件末尾会覆盖前面的字号，改字号必须两处一起动） */
    font-size: clamp(19px, 5vw, 21px);
  }

  #playerOverlay .player-controls-aux .comment-toggle-button {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0;
    font-size: 12px;
  }

  #playerOverlay .player-controls-aux .sleep-timer-label,
  #playerOverlay .player-controls-aux .playback-rate-select,
  #playerOverlay .player-controls-aux #downloadCurrentAudio .button-label,
  #playerOverlay .player-controls-aux .subtitle-toggle-button .button-label,
  #playerOverlay .player-controls-aux .comment-toggle-button .button-label {
    font-size: 13px !important;
  }

  #playerOverlay .player-ghost-control {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }

  #playerOverlay .player-ghost-control .ui-icon {
    width: 29px;
    height: 29px;
  }

  #playerOverlay #queueButton .ui-icon {
    width: 24px;
    height: 24px;
    transform: translateY(2px);
  }

  #playerOverlay #modeButton .ui-icon {
    width: 25px;
    height: 25px;
  }

  #playerOverlay .player-main-play {
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
  }

  #playerOverlay .player-main-play .ui-icon {
    width: 36px;
    height: 36px;
  }

  .comment-name {
    max-width: 48vw;
  }
}

/* comment action alignment fix */
.comment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  line-height: 1;
}

.comment-actions > .comment-icon-action,
.comment-actions > .comment-like-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
  vertical-align: middle;
}

.comment-actions .comment-action-icon,
.comment-actions .comment-action-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
  vertical-align: middle;
}

.comment-actions .comment-action-icon {
  width: 21px;
  height: 21px;
  line-height: 0;
}

.comment-actions .comment-action-icon .icon-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.comment-actions .comment-like-action .comment-action-icon {
  width: 20px;
  height: 20px;
  transform: none;
}

.comment-actions .comment-action-count {
  height: 20px;
  line-height: 20px;
  transform: none;
}

/* Comment action row stable alignment */
.comment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: max-content;
  padding-right: 14px;
  line-height: 1;
}

.comment-actions > .comment-icon-action,
.comment-actions > .comment-like-action,
.comment-actions > .comment-reply-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1;
  vertical-align: middle;
  transform: none;
}

.comment-actions > .comment-like-action {
  gap: 4px;
}

.comment-actions .comment-action-icon,
.comment-actions .comment-action-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
  vertical-align: middle;
  transform: none;
}

.comment-actions .comment-action-icon {
  width: 18px;
  height: 18px;
  line-height: 0;
}

.comment-actions .comment-action-icon .icon-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.comment-actions .comment-action-count {
  min-width: 8px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
}

.comment-reply-action {
  min-width: 34px;
  color: rgba(193, 210, 221, 0.86);
  font-size: 13px;
  font-weight: 700;
}

.comment-body-row {
  padding-right: 14px;
}

.comment-action--danger {
  margin-top: 0;
}

.comment-replies-toggle,
.comment-text-toggle {
  min-height: 30px;
  padding: 4px 4px;
  font-size: 13px;
  line-height: 1.2;
}

.comment-replies-toggle {
  margin-top: 2px;
}

/* ===== 设置面板家族统一观感（右上齿轮弹窗 / 倍速 / 字幕 / 音频弹幕抽屉 / A̲ 面板）：
   严格对齐弹幕插件的滚动设置面板——黑底 85%、小圆角、12px 白字、极简描边芯片，
   全端（手机/平板/电脑，苹果/安卓）同一个模子 ===== */
.video-settings-sheet {
  gap: 14px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 0;
  border-radius: 10px 10px 0 0;
  background: rgba(0, 0, 0, 0.85);
  box-shadow: none;
  font-size: 12px;
}

/* 顶部拖拽提示条：底部抽屉保留 */
.video-settings-sheet::before {
  content: "";
  justify-self: center;
  width: 40px;
  height: 4px;
  margin-bottom: -6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.video-settings-sheet .vs-label,
.dmk-composer .vs-label {
  font-size: 12px;
  letter-spacing: 0;
  color: #fff;
}

.video-settings-sheet .vs-value,
.dmk-composer .vs-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.video-settings-sheet .vs-options,
.dmk-composer .vs-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 选项按钮：插件面板同款极简——透明底 + 细白描边 + 3px 小圆角 + 12px 白字，
   选中态浅蓝描边浅蓝字，无胶囊无柔光 */
.video-settings-sheet .vs-option,
.dmk-composer .vs-option {
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  box-shadow: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.video-settings-sheet .vs-option.is-active,
.dmk-composer .vs-option.is-active {
  border-color: #8bd8ff;
  background: rgba(139, 216, 255, 0.14);
  color: #8bd8ff;
  box-shadow: none;
}

.video-settings-sheet .vs-slider {
  height: 28px;
}

/* 大屏时变悬浮卡片而非通栏 */
@media (min-width: 520px) {
  .video-settings-sheet {
    left: 50%;
    right: auto;
    width: min(380px, 92vw);
    transform: translateX(-50%) translateZ(0);
    border: 0;
    border-radius: 3px;
    bottom: 16px;
  }
}

/* 非全屏的视频设置面板（右上齿轮/字幕/倍速）：贴视频下缘的居中浮卡，
   坐标由 openVideoSettings 的 placeSheet 写入；不再从屏幕底边整条弹出 */
.video-settings-sheet--float {
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  width: min(380px, calc(100vw - 16px));
  border-radius: 3px;
  padding: 12px 14px;
}

.video-settings-sheet--float::before {
  display: none;
}

/* 横向视频全屏：倍速/字幕面板做成 B 站式竖向选单——窄卡片贴右下角按钮上方，
   选项竖排整列可点；上面 520px 媒体块的居中 transform 必须清掉，否则会被拽偏 */
.art-video-player.art-fullscreen-web:not(.jy-vertical) .video-settings-sheet,
.art-video-player.art-fullscreen:not(.jy-vertical) .video-settings-sheet {
  top: auto;
  width: auto;
  min-width: 128px;
  max-width: 200px;
  max-height: min(56vh, 330px);
  overflow-y: auto;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 3px;
  transform: none;
}

.art-video-player.art-fullscreen-web:not(.jy-vertical) .video-settings-sheet::before,
.art-video-player.art-fullscreen:not(.jy-vertical) .video-settings-sheet::before {
  display: none;
}

.art-video-player.art-fullscreen-web:not(.jy-vertical) .video-settings-sheet .vs-options,
.art-video-player.art-fullscreen:not(.jy-vertical) .video-settings-sheet .vs-options {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
}

.art-video-player.art-fullscreen-web:not(.jy-vertical) .video-settings-sheet .vs-option,
.art-video-player.art-fullscreen:not(.jy-vertical) .video-settings-sheet .vs-option {
  width: 100%;
  text-align: center;
}

/* 视频页弹幕样式面板（A̲）：严格照抄弹幕插件的滚动设置面板（apd-config-panel）——
   黑底 85%、3px 圆角、10px 内边距、12px 白字、无边框阴影；
   位置由 JS 锚在 A̲ 按钮正上方（同插件面板贴弹⚙按钮）。
   音频页编写条不带此类，仍固定底部浮在键盘上 */
.dmk-composer--video {
  position: fixed;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  z-index: 100001;
  width: min(320px, calc(100vw - 16px));
  padding: 10px;
  border: 0;
  border-top: 0;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.85);
  box-shadow: none;
  font-size: 12px;
}

/* 旋转全屏（播放器带 transform，fixed 坐标系会错位）：退回面板内居中 */
.dmk-composer--video.dmk-composer--centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 内部控件同步插件面板的极简观感：12px 白字、3px 小圆角、无胶囊无柔光 */
.dmk-composer--video .vs-label {
  font-size: 12px;
  letter-spacing: 0;
  color: #fff;
}

.dmk-composer--video .dmk-settings {
  gap: 10px;
  padding-top: 0;
}

.dmk-composer--video .vs-options {
  gap: 6px;
}

.dmk-composer--video .vs-option {
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font-size: 12px;
  box-shadow: none;
}

.dmk-composer--video .vs-option.is-active {
  border-color: #8bd8ff;
  background: rgba(139, 216, 255, 0.14);
  color: #8bd8ff;
  box-shadow: none;
}

.dmk-composer--video .dmk-swatch {
  border-radius: 3px;
}

/* 评论时间戳跳转链接（B 站式蓝字，点击跳到该时间点） */
.comment-body .cmt-time-link,
.comment-text-wrap .cmt-time-link {
  display: inline;
  min-height: 0;
  padding: 0 1px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--accent-strong);
  font: inherit;
  cursor: pointer;
}

.comment-text-wrap .cmt-time-link:active {
  opacity: 0.7;
}

/* ===== 下载弹窗合一版：标题旁复制标题、音频/视频两两成对（缺哪种就整对隐藏） ===== */
#downloadOverlay .drawer-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

#downloadOverlay .drawer-head-main .section-kicker {
  flex: 0 0 100%;
  margin: 0;
}

#downloadOverlay .copy-title-inline {
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

#downloadOverlay .copy-title-inline .ui-icon {
  display: none;
}

#downloadOverlay .filename-tip {
  white-space: pre-line;
}

/* 两列网格：下载 | 复制链接，音频一行、视频一行 */
#downloadOverlay .player-actions.download-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#downloadOverlay .player-actions.download-grid > .hidden {
  display: none !important;
}

/* 字幕标记：标题行末尾一枚低调的 CC 小字（无胶囊无边框，不抢标题） */
.work-row-top .tag-cc {
  flex: 0 0 auto;
  /* 固定靠行尾，不跟着标题长短漂移 */
  margin-left: auto;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(155, 221, 255, 0.78);
  /* 图标尺寸（跟随字号） */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.04em;
}


/* 进入作品列表后隐藏顶部 logo/欢迎语/头像那一行，让列表占满屏幕；
   搜索框留着（听众常在列表里搜），返回分类自动恢复 */
body.list-view-open .hero-main {
  display: none;
}

body.list-view-open .hero {
  gap: 0;
  margin-bottom: 6px;
}

/* 播放详情页：左上返回 / 右上关闭 去掉底框与圆角胶囊感，只留图标 */
#playerOverlay .player-page-head-button,
#playerOverlay .player-back-button,
#playerOverlay .close-button,
#playerOverlay .drawer-close {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}


/* 标题盒子撑满到 CC 之前，短标题右边的空白也算可点区（点它就能播放）；
   CC 仍靠 margin-left:auto 固定在最右，不受影响 */
.work-row-top:has(.tag-cc) .row-title {
  flex: 1 1 auto;
}

/* 右侧安全边距，CC 不顶到屏幕边缘 */
.work-row-top:has(.tag-cc) {
  padding-right: 14px;
}


/* CC 图标与文字基线对齐 */
.work-row-top .tag-cc svg {
  display: block;
  opacity: 0.9;
}

/* 浮层内部滚动不外溢到底下页面 */
.drawer-overlay,
.utility-drawer,
#downloadOverlay,
#copyOverlay,
#sleepTimerOverlay {
  overscroll-behavior: contain;
}

/* 下载弹窗提示语：支持分段换行，行距舒展；文件名行已不再使用 */
#downloadOverlay .utility-tip {
  white-space: pre-line;
  line-height: 1.7;
}

#downloadOverlay .filename-tip:empty {
  display: none;
}

/* 下载/复制类抽屉：左右留出安全边距、内容内缩，不再顶到屏幕边缘 */
#downloadOverlay,
#copyOverlay {
  padding-left: 12px;
  padding-right: 12px;
}

#downloadOverlay .utility-drawer,
#copyOverlay .utility-drawer {
  padding: 20px 22px calc(22px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
}

/* ABO 世界观弹窗（016 付费简介"听前须知"内置全文） */
.abo-guide-link {
  display: inline-block;
  margin: 2px 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: #5aa7ff; /* 链接专属蓝：比站内冰青更"蓝"，一眼可点，深底对比度达标 */
  font-size: 13px; /* 与简介正文同字号，别比小标题还大 */
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.abo-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 10, 22, 0.78);
}

.abo-guide-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(76vh, 640px);
  display: flex;
  flex-direction: column;
  padding: 16px 4px 16px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #0e1b30; /* 实色：--panel 是半透明，长文弹窗下面透列表会花 */
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.abo-guide-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.abo-guide-scroll {
  flex: 1 1 auto;
  min-height: 0; /* flex 容器内不加这条，手机端滚动会卡死 */
  overflow-y: auto;
  padding-right: 12px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.abo-guide-scroll p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
}

.abo-guide-heading {
  margin-top: 14px !important;
  font-weight: 700;
  font-size: 14.5px !important;
}

/* 站内图文教程弹窗补充样式 */
.abo-guide-scroll img {
  display: block;
  max-width: 100%;
  margin: 4px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.guide-inline-link {
  display: inline-block;
  margin: 0 10px 10px 0;
  color: #5aa7ff;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}

.guide-backup-line {
  margin-top: 16px !important;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted) !important;
  font-size: 12px !important;
}

.guide-backup-line .guide-inline-link {
  margin: 0 0 0 8px;
  font-size: 12px;
}

.guide-open-btn {
  display: block;
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(90, 167, 255, 0.08);
  color: #5aa7ff;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

/* 图文教程全屏页（弹窗容不下 29 张图的长教程） */
.guide-page {
  position: fixed;
  inset: 0;
  z-index: 400;
  overflow-y: auto; /* 整页单层滚动：iOS 对 fixed 容器内嵌套 flex 滚动区支持极差 */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: #0a1424;
}

.guide-page-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0a1424; /* sticky 吸顶需不透明底 */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  border-bottom: 1px solid var(--line);
}

.guide-page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px 6px 0;
  border: 0;
  background: none;
  color: #5aa7ff;
  font-size: 15px;
  cursor: pointer;
}

.guide-page-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.guide-page-scroll {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  padding: 14px 16px calc(30px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

/* 教程页两种方式之间的分隔线 */
.guide-divider {
  border: 0;
  border-top: 1px solid rgba(125, 211, 252, 0.22);
  margin: 20px 0;
}

/* ---- 断点续播提示：浮在迷你播放器正上方，点了才跳，不点自己消失 ---- */
.resume-tip {
  position: fixed;
  z-index: 30; /* 和播放器同层：播放器界面能显示，但不会穿透到播放列表(40)上面（避免"穿模"） */
  right: 14px;
  /* 迷你播放器高约 56px，再往上留 8px */
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 1px 5px 1px 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(10, 22, 38, 0.7);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(20px);
  transform: translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.resume-tip.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* 大播放器打开时，续播提示移到进度条上方（而不是被底部控制条盖住） */
body.player-page-open .resume-tip {
  /* 右边对齐进度条右端（右手更好按）：sheet 右内边距 + 控制区(2) + 进度条区(12) */
  right: calc(clamp(18px, 4vw, 34px) + 14px);
  bottom: calc(24vh + env(safe-area-inset-bottom, 0px));
}

.resume-tip-text {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 12px;
  color: rgba(226, 240, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resume-tip-btn {
  flex: 0 0 auto;
  min-height: 18px;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.resume-tip-close {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(226, 240, 255, 0.5);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .resume-tip-btn:hover { filter: brightness(1.2); }
  .resume-tip-close:hover { color: rgba(226, 240, 255, 0.85); }
}