/* =========================================================================
 * 音悦声 · 版权声明 / 音源状态 / 多源聚合标识
 *  - 全部走既有 CSS 变量，因此六套主题自动适配，不需要按主题重复写一遍
 * ========================================================================= */

/* ---------------------------- 音源徽标 ---------------------------- */
/* 场景：列表里出现"由酷狗 / QQ 音乐曲库发现"的曲目时，给一个轻量标签，
   让"多平台聚合"这件事看得见，而不是只写在文案里。 */
.src-chip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-0) 72%, transparent);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  white-space: nowrap;
}
.src-chip.is-off {
  color: var(--mute);
  border-style: dashed;
}

/* 行内（列表行）场景：不绝对定位，跟在歌名后面 */
.track-name .src-chip,
.track-main .src-chip {
  position: static;
  left: auto;
  top: auto;
  height: 17px;
  padding: 0 6px;
  margin-left: 6px;
  font-size: 10px;
  vertical-align: 1px;
  background: var(--panel-3);
}

/* -------------------- 不可播放条目（外部曲库） -------------------- */
/* 置灰 + 去掉悬浮抬起，明确表达"看得到、听不了"。
   动作层的拦截在 ui.js#bindListActions，这里只负责视觉。 */
.card.is-off,
.track-row.is-off {
  opacity: 0.5;
  cursor: not-allowed;
}
.card.is-off:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}
.card.is-off .card-play {
  background: var(--panel-3);
  color: var(--mute);
}
.track-row.is-off .track-idx { color: var(--mute); }

/* ---------------------- 聚合说明条（搜索页） ---------------------- */
.agg-note {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
}
.agg-note b { color: var(--text); font-weight: 600; }
.agg-note .ic { color: var(--brand); }

/* 搜索框旁的「全平台聚合」开关 */
.agg-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.agg-switch-label {
  font-size: 12.5px;
  color: var(--dim);
  white-space: nowrap;
}

/* ---------------------------- 页脚声明 ---------------------------- */
.legal-foot {
  margin: 26px 0 8px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.legal-foot-main {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--dim);
}
.legal-foot-main .ic { color: var(--brand); flex: none; margin-top: 2px; }
.legal-foot-main b { color: var(--text); font-weight: 600; }
.legal-foot-sub {
  font-size: 12px;
  line-height: 1.7;
  color: var(--mute);
  padding-left: 25px;
}
.legal-link {
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.legal-link:hover { text-decoration: underline; }

/* ------------------------- 声明页（#/about） ------------------------- */
.about-card {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about-card + .about-card { margin-top: 14px; }
.about-card.is-warn {
  border-left: 3px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--panel));
}
.about-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
}
.about-h .ic { color: var(--brand); }
.about-h .about-sub {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--mute);
}
.about-h code {
  font-family: var(--font-num);
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--panel-3);
}
.about-p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--dim);
}
.about-p b { color: var(--text); font-weight: 600; }
.about-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--dim);
}
.about-list li {
  position: relative;
  padding-left: 16px;
}
.about-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.75;
}
.about-list b { color: var(--text); font-weight: 600; }

/* 音源状态表 */
.src-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.src-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.src-row.is-off { opacity: 0.72; }
.src-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  margin-top: 6px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}
.src-row.is-off .src-dot { box-shadow: none; opacity: 0.6; }
.src-info { min-width: 0; flex: 1; }
.src-name {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 620;
  color: var(--text);
}
.src-vendor {
  font-size: 11.5px;
  color: var(--mute);
  margin-top: 2px;
}
.src-note {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--dim);
  margin-top: 5px;
}
.src-tag {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--dim);
  background: var(--panel-3);
  border: 1px solid var(--line);
}
.src-tag.is-ok { color: #1f9d55; border-color: color-mix(in srgb, #1f9d55 44%, transparent); }
.src-tag.is-bad { color: #d9534f; border-color: color-mix(in srgb, #d9534f 44%, transparent); }
.src-tag.is-primary {
  color: var(--on-brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
}

/* --------------------- 跨类型切换（音乐 ↔ MV） --------------------- */
/**
 * 播放页动作栏里的这颗按钮由 player.js#fillCrossSlot **异步**填充
 * （匹配要联网：/api/cross/match），所以先用 .cross-slot 占位再填。
 * ★ `.cross-slot:empty { display:none }` 是必须的：没匹配到同名内容时按钮整体不出现，
 *   如果留着空的行内块，动作栏里会多出一个 8px 的 gap 空档，看起来像"少了一个按钮"。
 * 动作栏本身是 flex-wrap，窄屏会自动换行，这里不需要再压字号。
 */
.cross-slot {
  display: inline-flex;
  align-items: center;
}
.cross-slot:empty { display: none; }

/* 同名**同歌手**（优先原唱）→ 主按钮，用品牌色和海量次要按钮区分开 */
.btn-cross {
  background: color-mix(in srgb, var(--brand) 10%, var(--panel-2));
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line-2));
}
.btn-cross:hover {
  background: color-mix(in srgb, var(--brand) 18%, var(--panel-2));
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line-2));
}
.btn-cross .ic { color: var(--brand); }

/* 「同名但其他歌手」的次选：虚线边框 + 收敛字号，一眼看出**不是原唱**。
   文案里会带出歌手名（见 fillCrossSlot），不做静默替换。 */
.btn-cross.is-alt {
  background: var(--panel-2);
  border-style: dashed;
  border-color: var(--line-2);
  color: var(--dim);
  font-size: 12.5px;
}
.btn-cross.is-alt:hover {
  background: var(--panel-3);
  color: var(--text);
}
.btn-cross.is-alt .ic { color: var(--mute); }

/* 窄屏：声明页排版收紧 */
@media (max-width: 767px) {
  .about-card { padding: 15px 14px; }
  .legal-foot { padding: 14px 14px; }
  .legal-foot-sub { padding-left: 0; }
  .agg-switch-label { display: none; }
}