/* 手动补选（C2.271 · DESIGN §123）
 *
 * 两块东西：
 *   .btn.line / .dt-more —— 明细里「立即抓取」按钮与抓不全时的提示条
 *   .pk.*               —— 补选覆盖层（同一个弹窗里换内容，不叠第二层弹窗）
 */

/* 「立即抓取」做成描边按钮：比纯文字能看出可点，又不跟实心的「加入」抢主次 */
.btn.line {
  background: var(--panel);
  border-color: var(--btn-primary);
  color: var(--btn-primary);
}
.btn.line:hover {
  background: var(--brand-d);
  border-color: var(--btn-primary);
}

/* 抓不全时的提示条。位置与粉色的报错条相同，两者互斥，不会同时出现 */
.dt-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 11px;
  background: var(--brand-d);
  border: 1px solid var(--line-brand);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--txt2);
}
.dt-more b {
  color: var(--txt);
  font-weight: 650;
}
.dt-more .linkbtn {
  margin-left: auto;
  color: var(--btn-primary);
  font-weight: 650;
  white-space: nowrap;
}
.dt-more .linkbtn:hover {
  text-decoration: underline;
}

/* ---------- 补选覆盖层 ---------- */

.pk {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 12px;
}

.pk-h {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.pk-back {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--btn-primary);
}
.pk-back:hover {
  text-decoration: underline;
}
.pk-cnt {
  margin-left: auto;
  font-size: 12px;
  color: var(--txt3);
}
.pk-cnt b {
  color: var(--txt);
}

.pk-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  align-items: flex-start;
}

.pk-list {
  flex: 1;
  min-width: 0;
  max-height: 100%;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.pk-tr {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 112px;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.pk-tr:last-child {
  border-bottom: 0;
}
/* C2.286：整行不再可点（播放器已移除），只有右下角那串链接是链接 */
.pk-tr.is-in {
  background: var(--soft2);
}

.pk-th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  font-size: 11px;
  color: var(--txt3);
  border-bottom: 1px solid var(--line);
}

.pk-ck {
  width: 13px;
  height: 13px;
  margin: 2px 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}
/* 已加入那一行用打勾方块代替复选框：它是状态，不是可选项 */
.pk-ck.is-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--panel3);
  color: var(--txt3);
  font-size: 9px;
}

.pk-c {
  min-width: 0;
}
.pk-cap {
  font-size: 12.5px;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-tr.is-in .pk-cap {
  color: var(--txt3);
}
.pk-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--txt3);
}
.pk-u {
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--green);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.pk-u:hover {
  text-decoration: underline;
}
.pk-tr.is-in .pk-u {
  color: var(--txt3);
}

/* C2.286：右侧内嵌播放器整块删掉了（.pk-side / .pk-player / .pk-pv / .pk-ph / .pk-hint / .pk-fail）。
 * 原因：TikTok embed 在国内网络基本加载不出来，那块永远显示「这个视频播放不出来」，
 * 占位置、还让人以为补选坏了。链接本身已经可点（.pk-u 变成 <a>，点开去 TikTok 看）。 */

.pk-f {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--soft);
}
.pk-sel {
  font-size: 11.5px;
  color: var(--txt3);
}
.pk-f .btn {
  margin-left: 0;
}
.pk-f .btn:nth-last-child(2) {
  margin-left: auto;
}

@media (max-width: 720px) {
  .pk-body {
    flex-direction: column;
  }
}