/* 头像图片样式 */
.tupian {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
    object-fit: cover;
}

/* 昵称标题 */
h3 {
    /*display: inline-block;*/
    font-weight: bold
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: normal;
    vertical-align: middle;
}

/* 昵称文字颜色 #37a */
h3 span {
    color: #37a;
}

/* 评论外层容器 */
.comment {
    margin: 8px 0 16px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #d0dede;
    padding: 0;
}

/* 评论正文 */
.short {
    display: inline;
}

/* 单条评论整体容器 + 分割线 */
.comment-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
    border-bottom: 1px solid #304242;
    padding: 0px;
}
/* 最后一条去掉分割线 */
.comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.comment-body {
    flex: 1;
}

.comment-list-box {
    border-bottom: 1px solid #efefef;
    /*padding: 0 10px;*/
    /* 基础全屏 */
    width: 100%;
    box-sizing: border-box;
}

/* ========== 手机端自适应 新增代码 ========== */
@media (max-width: 768px) {
    /* 外层容器手机满铺，去掉左右边距 */
    .comment-list-box {
        padding: 0;
    }
    /* 头像适当缩小，更适配手机 */
    .tupian {
        width: 40px;
        height: 40px;
    }
    /* 字体微调，阅读更舒服 */
    h3 {
        font-size: 14px;
    }
    .comment {
        font-size: 13px;
            margin: 1px 0 1px 0;
    }
    /* 评论项左右贴边，完全铺满 */
    .comment-item {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* 评论操作按钮 */
.comment-body {
  position: relative;
  padding-bottom: 8px;
}
.comment-actions {
  position: absolute;
   /*height: 0px;*/
  right: 0;
  bottom: 0;
  display: flex;
  gap: 16px;
  z-index: 2;
}
.comment-actions a {
  text-decoration: none;
  font-size: 13px;
  color: #888;
  cursor: pointer;
}
.comment-actions a:hover { color: #37a; }
.comment-actions .clicked { color: #e74c3c; transform: scale(1.2); }
.comment-actions .disabled { pointer-events: none; opacity: 0.5; }
.comment-actions a.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.comment-actions a.voted {
  color: #37a !important;
  font-weight: bold;
}
.comment-actions a[data-locked] {
  pointer-events: none;
  opacity: 0.6;
}
.comment-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 12px;
  z-index: 2;
  align-items: center;       /* 确保图标和文字垂直居中 */
}

.comment-actions a {
  display: inline-flex;
  align-items: center;
  gap: 4px;                 /* 图标与文字间距 */
  text-decoration: none;
  font-size: 13px;
  color: #999;              /* 默认灰色 */
  cursor: pointer;
  transition: color 0.2s, transform 0.1s;
  padding: 2px 4px;
  border-radius: 4px;
}

.comment-actions a:hover {
  color: #37a;              /* 悬停变蓝 */
  background: rgba(55, 170, 255, 0.08);
}

/* 图标样式 */
.comment-actions .vote-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;       /* 继承文字颜色 */
  flex-shrink: 0;
}

/* 已投票状态高亮 */
.comment-actions a.voted {
  color: #37a !important;
  font-weight: 600;
}

.comment-actions a.voted .vote-icon {
  fill: #37a;
}

/* 锁定状态 */
.comment-actions a[data-locked] {
  pointer-events: none;
  opacity: 0.5;
}

/* 轻微点击效果 */
.comment-actions a:active {
  transform: scale(0.92);
}

/* 回复按钮 */
.comment-actions .action-reply {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #999;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
}
.comment-actions .action-reply:hover { color: #37a; }
.comment-actions .action-reply svg { width: 16px; height: 16px; fill: currentColor; }

/* 回复区域 */
.reply-box {
  margin-top: 10px;
  padding: 10px;
  background: rgba(13,115,119,0.05);
  border-radius: 8px;
}
.reply-list { margin-bottom: 10px; }
.reply-item {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 13px;
  color: #ccc;
}
.reply-item strong { color: #37a; margin-right: 4px; }
.reply-time { color: #6B9999; font-size: 11px; margin-left: 8px; }
.reply-empty { color: #6B9999; font-size: 13px; }
.reply-form { display: flex; gap: 8px; }
.reply-input {
  flex: 0.5;
  padding: 6px 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  resize: vertical;
}
.reply-submit {
  padding: 6px 14px;
  background: var(--primary);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
}
.reply-submit:disabled { opacity: 0.5; }
/* ========== 回复功能移动端优化 ========== */
@media (max-width: 768px) {
  /* 回复输入区域：小屏改为垂直排列，按钮撑满 */
  .reply-form {
    flex-direction: column;
    gap: 8px;
  }
  .reply-input {
    width: 100%;
    font-size: 14px;       /* 防止 iOS 缩放 */
    padding: 8px 10px;
  }
  .reply-submit {
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    text-align: center;
  }

  /* 回复列表：调整内边距，让文字不贴边 */
  .reply-box {
    padding: 8px;
    margin-top: 8px;
  }
  .reply-item {
    padding: 8px 0;
    font-size: 13px;
    line-height: 1.5;
  }
  .reply-time {
    display: block;        /* 时间单独一行，避免拥挤 */
    margin-left: 0;
    margin-top: 2px;
  }

  /* 评论操作栏（顶/踩/回复）在小屏上调整间距 */
  .comment-actions {
    gap: 10px;
    flex-wrap: wrap;
  }
  .comment-actions a {
    font-size: 12px;
    padding: 4px 6px;
  }
  .comment-actions .vote-icon {
    width: 14px;
    height: 14px;
  }
}
/* 确保操作栏始终浮在回复框上方 */
.comment-actions {
  z-index: 10;          /* 提高层级 */
}
.reply-box {
  position: relative;
  z-index: 1;           /* 低于操作栏 */
  clear: both;          /* 避免浮动影响 */
}

/* 移动端加强 */
@media (max-width: 768px) {
  .comment-body {
    padding-bottom: 25px;  /* 增大底部空间，防止操作栏被顶出可视区 */
  }
  .reply-box {
    margin-bottom: 12px;   /* 给操作栏留出呼吸空间 */
  }
}
/* 回复表单默认隐藏 */
.reply-form {
  display: none;
}
/* 当回复框激活时显示表单 */
.reply-box.active .reply-form {
  display: flex;
}


.short-expand {
  color: rgb(66, 189, 86);
  cursor: pointer;
  margin-left: 4px;
  text-decoration: none;
}
.short-expand:hover {
  color: #2d8c3e;  /* 略深一点的绿色，便于区分悬停态 */
  text-decoration: underline;
}


/* ========== 演员列表网格 ========== */
.cast-grid-wrapper {
  margin-top: 16px;
}

.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cast-grid dd {
  background: rgba(13, 115, 119, 0.08);
  border: 1px solid rgba(13, 115, 119, 0.15);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: background 0.2s, transform 0.2s;
}

.cast-grid dd:hover {
  background: rgba(13, 115, 119, 0.18);
  transform: translateY(-2px);
}

.cast-grid dd span:first-child {
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 2px;
}

.cast-grid dd span:last-child {
  font-size: 0.8rem;
  color: #A8D5D5;
}

/* 展开/收起按钮 */
.cast-toggle {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: rgba(13, 115, 119, 0.15);
  border: 1px solid rgba(13, 115, 119, 0.3);
  border-radius: 8px;
  color: #A8D5D5;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}

.cast-toggle:hover {
  background: rgba(13, 115, 119, 0.25);
  color: #fff;
}

/* 移动端 */
@media (max-width: 480px) {
  .cast-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
  .cast-grid dd {
    padding: 8px 10px;
  }
}

/* 移动端底部导航*/
.mobile-bottom-nav {
  display: none;                     /* 默认隐藏，移动端显示 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(10, 22, 22, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(13,115,119,0.3);
  z-index: 1000;
  justify-content: space-around;
  align-items: center;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #A8D5D5;
  font-size: 11px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 12px;
  transition: color 0.2s;
}

.bottom-nav-item:hover,
.bottom-nav-item:active {
  color: #00CEC9;
}

.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* 移动端显示 */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
  }
  body {
    padding-bottom: 60px;   /* 为底栏留出空间 */
  }
}

/* 页面不展示这个 JSON 文本（不让用户看见一长串原始数据），但 DOM 里保留完整内容，方便你 JS 读取解析给 D3 绘图，只用 CSS 隐藏容器即可。*/
h3:has(+ .relation-graph),
.relation-graph {
    display: none !important;
}




/* ========== 10个问题  观剧百晓 FAQ 卡片样式 ========== */
/* ---------- 观剧百晓 样式优化 ---------- */
/* 1. 容器的 Flex 排版 (使用您原始的 gap 写法，防止 margin 塌陷) */
.detail-main .detail-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px; /* 稍微缩小了间距，卡片看起来更紧凑高级 */
}

/* 2. 每一个问答做成独立的“小卡片” */
.detail-main .detail-section ul li {
    background: rgba(13, 115, 119, 0.08); /* 您的原生淡青色背景 */
    border: 1px solid rgba(13, 115, 119, 0.15); /* 对应的淡青色描边 */
    border-radius: 12px;
    padding: 18px 20px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* 3. 鼠标放上去的背景和边框变化 (保留您的优秀微交互) */
.detail-main .detail-section ul li:hover {
    background: rgba(13, 115, 119, 0.14);
    border-color: rgba(0, 206, 201, 0.3); /* 悬停时边框变成明亮的青绿色 */
}

/* 4. 问题标题 (改为显眼的青绿色，用户一眼就能找到问题) */
.detail-main .detail-section ul li b {
    display: block;
    color: #00CEC9; /* 青色高亮 */
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* 5. 答案内容 (采用亮度更高的灰白色，非常清晰) */
.detail-main .detail-section ul li p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #d1d5db;
}

/* 6. 答案中强调的关键信息 (改成白色粗体，在灰色背景中极其醒目) */
.detail-main .detail-section ul li p span,
.detail-main .detail-section ul li p strong span {
    color: #ffffff; 
    font-weight: 500;
}

/* 7. 移动端细节点适配 (保持您的原版) */
@media (max-width: 768px) {
    .detail-main .detail-section ul {
        gap: 12px;
    }
    .detail-main .detail-section ul li {
        padding: 14px 16px;
    }
    .detail-main .detail-section ul li b {
        font-size: 0.95rem;
    }
    .detail-main .detail-section ul li p {
        font-size: 0.9rem;
    }
}




/* ========== 评分重组CSS（PC端完全保留） ========== */
.ten-star-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(13, 115, 119, 0.1);
  border-radius: 12px;
  padding: 14px 20px;
  gap: 14px;
  max-width: 680px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s;
}
.ten-star-rating:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ========== 人数标签 ========== */
.rating-count {
  font-size: 13px;
  background: #c8e6c9;
  color: #1b5e20;
  padding: 0 14px;
  border-radius: 12px;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.3px;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* ========== 星星列表 ========== */
.rating-stars {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rating-stars li {
  cursor: pointer;
  font-size: 24px;
  color: #d5d8dc;
  transition: color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}
.rating-stars li:hover {
  transform: scale(1.25);
  color: #ffc107;
}
.rating-stars li.active {
  color: #ffb400;
}
.rating-stars li.locked {
  pointer-events: none;
  opacity: 0.8;
  cursor: default;
}

/* ========== 文字描述 — 红色胶囊 ========== */
.rating-word {
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #ff6b6b 0%, #e74c3c 100%);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  min-width: 56px;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.2);
}

/* ========== 分数标签 — 深色胶囊 ========== */
.rating-score {
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, #000000 0%, #1a252f 100%);
  color: #ecf0f1;
  padding: 6px 18px;
  border-radius: 20px;
  transition: background-color 0.3s, transform 0.2s;
  min-width: 62px;
  text-align: center;
}

/* ========== 移动端适配（≤500px） ========== */
@media (max-width: 500px) {
  .ten-star-rating {
    padding: 12px 14px;
    gap: 12px 8px;
    background: rgba(13, 115, 119, 0.2);
    border-radius: 10px;
  }

  /* 星星独占第一行，满铺散开 */
  .rating-stars {
    order: -1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
  }
  .rating-stars li {
    font-size: 20px;
    flex: 0 0 auto;
  }

  /* 底部三个标签统一 flex 布局，垂直水平双居中 */
  .rating-count,
  .rating-word,
  .rating-score {
    align-self: stretch;
    border-radius: 20px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 8px;
  }

  .rating-count {
    font-size: 12px;
  }
  .rating-word {
    font-size: 12px;
    min-width: auto;
  }
  .rating-score {
    font-size: 14px;
    min-width: 48px;
  }
}

/* ========== LOGO适配 ========== */
   .vendor-item {
            display: flex;
            align-items: center;
            list-style: none;
            margin-bottom: 8px;
        }
        .vendor-item .vendor-icon {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            object-fit: contain;
        }
        
        
        
        
        
        
/* ========== 分集短评独立样式 ========== */
.episodes-wrapper {
  margin: 30px 0;
  color: #d0dede;
}

.episodes-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}

/* 季标签 */
.season-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.season-tab {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #aaa;
  padding: 7px 20px;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.season-tab.active,
.season-tab:hover {
  background: #00cec9;
  border-color: #00cec9;
  color: #0a1616;
  font-weight: 600;
}

/* 容器切换 */
.episodes-container {
  display: none;
}
.episodes-container.active {
  display: block;
}

/* 剧集网格 */
.episodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 剧集网格 */
.episodes-gridd {
  display: grid;

  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 剧集卡片（包括展开按钮的 li） */
.episodes-grid li {
  margin: 0;
}

.episodes-grid li a,
.episodes-grid li .episode-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ddd;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.episodes-grid li a:hover,
.episodes-grid li .episode-toggle-btn:hover {
  background: rgba(0, 206, 201, 0.2);
  border-color: #00cec9;
  color: #fff;
}

/* 展开按钮特殊样式（可稍微区分） */
.episodes-grid li .episode-toggle-btn {
  background: rgba(0, 206, 201, 0.1);
  border-color: rgba(0, 206, 201, 0.4);
  color: #00cec9;
  font-weight: 500;
}
.episodes-grid li .episode-toggle-btn:hover {
  background: rgba(0, 206, 201, 0.25);
}

/* ========== 移动端适配 ========== */
@media (max-width: 600px) {
  .episodes-grid {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));  /* 52px 起，不再拥挤 */
    gap: 6px;
  }
  .episodes-grid li a,
  .episodes-grid li .episode-toggle-btn {
    height: 36px;           /* 稍微增高，方便点击 */
    font-size: 0.8rem;
    padding: 0 4px;
  }
  .season-tab {
    font-size: 0.8rem;
    padding: 5px 16px;
  }
}



/* ========== 播放页侧边栏：分集短评横排样式 ========== */
.play-sidebar__section .related-list {
  padding: 0;
  margin: 0;
}

/* 隐藏所有季列表，让 JS 控制显示（如果你有季切换，配合 JS 即可） */
.play-sidebar__section .episode-list {
  display: none;
}
.play-sidebar__section .episode-list.active {
  display: block;
}

/* 剧集网格：自适应等宽卡片，自动换行，不撑破侧边栏 */
.play-sidebar__section .episode-list ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.play-sidebar__section .episode-list li {
  margin: 0;
}

.play-sidebar__section .episode-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 32px;
  padding: 0 4px;
  font-size: 0.8rem;
  color: #d0dede;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.2s, border-color 0.2s;
}

.play-sidebar__section .episode-list li a:hover {
  background: rgba(0, 206, 201, 0.2);
  border-color: #00cec9;
  color: #fff;
}

/* 如果剧集数量过多，超过一定行数可以加个滚动（可选，根据需求开启） */

/*
.play-sidebar__section .episode-list ul {
  max-height: 200px;
  overflow-y: auto;
}
*/

@media (max-width: 600px) {
  .play-sidebar__section .episode-list li a {
    height: 36px;          /* 触屏更友好 */
    font-size: 0.85rem;
    padding: 0 6px;
  }
}
@media (max-width: 768px) {
    .info-gridd {
        grid-template-columns: repeat(1, 1fr);
    }
    .info-griddd {
        grid-template-columns: repeat(3, 1fr);
    }
}



/* 父容器：控制横排、间距、垂直居中 */
.rating-wrap {
  display: flex;
  margin-top: 12px;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap; /* 空间不够时自动换行，适配小屏 */
}

/* 两个标签公共样式，合并重复代码 */
.rating-scoree {
   background: rgba(0, 206, 201, 0.08);
  border: 1px solid rgba(0, 206, 201, 0.25);
  color: var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 13px;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}
.comment-hot-tag {
    animation: pulse 1.5s infinite;
}
.reply-avatar {
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 回复头像 hover 放大 */
.reply-avatar:hover {
    transform: scale(1.1);
}

/* 点赞按钮 hover 缩放 */
.action-up:hover {
    transform: scale(1.08);
}























/* ========= 口碑对决组件 - 完整版 ========= */
:root {
  --pk-digg-color: #00e676;
  --pk-tread-color: #ff1744;
  --pk-bg: #1a1a1a;
  --pk-track-bg: #2a2a2a;
  --pk-text-muted: #aaa;
  --pk-radius: 16px;
}

/* 外层容器 */
.pk-vs-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}

.pk-box {

  padding: 14px 12px;
  color: #fff;
  border-radius: 0;

  box-sizing: border-box;
}

/* PC 端：居中卡片 */
@media (min-width: 768px) {
  .pk-box {
    border-radius: var(--pk-radius);
    padding: 20px 18px;
    margin: 0 auto;
  }
}

/* 头部 */
.pk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pk-title {
  font-size: 16px;
  font-weight: 700;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  .pk-title { font-size: 18px; }
  .pk-header { margin-bottom: 14px; }
}

/* 数据行 */
.pk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.pk-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}
.pk-side-label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pk-side-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  transition: transform 0.2s;
}

/* 好片 / 烂片颜色 */
.pk-left .pk-side-label,
.pk-left .pk-side-num {
  color: var(--pk-digg-color);
  text-shadow: 0 0 8px rgba(0,230,118,0.4);
}
.pk-right .pk-side-label,
.pk-right .pk-side-num {
  color: var(--pk-tread-color);
  text-shadow: 0 0 8px rgba(255,23,68,0.4);
}

/* 进度条 */
.pk-bar-wrap {
  flex: 1;
  position: relative;
}
.pk-bar-track {
  height: 12px;
  background: var(--pk-track-bg);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
}
.pk-digg-bar,
.pk-tread-bar {
  height: 100%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pk-digg-bar {
  background: linear-gradient(90deg, #00c853, #69f0ae);
  border-radius: 12px 0 0 12px;
  box-shadow: 0 0 8px rgba(0,200,83,0.4);
}
.pk-tread-bar {
  background: linear-gradient(90deg, #ff5252, #ff1744);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 0 8px rgba(255,23,68,0.4);
}
.pk-percent {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  background: rgba(0,0,0,0.8);
  color: #ddd;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(4px);
  font-weight: 500;
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

/* PC 端微调 */
@media (min-width: 768px) {
  .pk-row { gap: 16px; margin-bottom: 16px; }
  .pk-side-label { font-size: 14px; }
  .pk-side-num { font-size: 34px; }
  .pk-bar-track { height: 14px; }
  .pk-percent {
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.15);
  }
}

/* 按钮组 */
.pk-actions {
  position: relative;
  display: flex;
  gap: 36px;
  justify-content: center;
  margin-top: 6px;
}
.pk-btn {
  flex: 1;
  border: none;
  border-radius: 20px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 42px;
  touch-action: manipulation;
  letter-spacing: 0.5px;
  font-family: inherit;
}
.pk-btn-digg {
  background: #00c853;
  box-shadow: 0 4px 12px rgba(0,200,83,0.4);
}
.pk-btn-tread {
  background: #d50000;
  box-shadow: 0 4px 12px rgba(213,0,0,0.4);
}

/* PC端hover效果 */
@media (min-width: 768px) {
  .pk-btn-digg:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 16px rgba(0,200,83,0.5);
  }
  .pk-btn-tread:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 16px rgba(213,0,0,0.5);
  }
}

.pk-btn:active {
  transform: scale(0.96);
  filter: brightness(0.9);
}
.pk-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* PC 端按钮稍大 */
@media (min-width: 768px) {
  .pk-btn {
    font-size: 15px;
    padding: 12px 0;
    min-height: 46px;
  }
}

/* VS 徽章：两个按钮正中间悬浮 */
.pk-actions .pk-vs-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 12px;  /* 字号缩小一点 */
  font-weight: 900;
  background: #f1c40f;
  color: #000;
  padding: 3px 10px;  /* 内边距收窄 */
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(241,196,15,0.5);
  animation: pkVsPulse 3s ease-in-out infinite;
}

/* PC端VS尺寸微调 */
@media (min-width: 768px) {
  .pk-actions .pk-vs-badge {
    font-size: 14px;
    padding: 3px 14px;
    
  }
}

/* 消息提示 */
.pk-msg {
  text-align: center;
  margin-top: 6px;
  font-size: 12px;
  color: #999;
  min-height: 18px;
  opacity: 0;
  transition: opacity 0.3s;
}
.pk-msg.show {
  opacity: 1;
}
@media (min-width: 768px) {
  .pk-msg { font-size: 13px; }
}

/* 通用图标样式 */
.pk-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
}

/* 数字弹跳动画 */
.pk-pop {
  animation: pkPop 0.3s ease;
}
@keyframes pkPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); filter: brightness(1.2); }
  100% { transform: scale(1); }
}

/* VS 呼吸发光动画 */
@keyframes pkVsPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(241,196,15,0.5), 0 0 20px rgba(243,156,18,0.3); }
  50% { box-shadow: 0 0 14px rgba(241,196,15,0.7), 0 0 24px rgba(243,156,18,0.4); }
}

/* 投票时图标同步弹跳 */
.pk-side-label:has(+ .pk-pop) .pk-icon {
  animation: pkIconPop 0.3s ease;
}
@keyframes pkIconPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ========= 移动端满铺专用 ========= */
@media (max-width: 767px) {
  .pk-vs-wrapper {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow-x: hidden;
  }
  .pk-box {
    border-radius: 0;
    padding: 10px 12px;
  }
  .pk-title { font-size: 15px; }
  .pk-side-num { font-size: 26px; }
  .pk-btn { font-size: 13px; min-height: 40px; }
  .pk-actions .pk-vs-badge {
    font-size: 12px;
    padding: 2px 10px;
  }
}



/* ========== 脉冲波纹分界指示器 ========== */
.pk-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  z-index: 1;
  pointer-events: none;
  /* 和进度条同步平滑移动 */
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 双层波纹，错开动画时间更自然 */
.pk-pulse-ring::before,
.pk-pulse-ring::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #f1c40f;
  box-shadow: 0 0 8px rgba(241,196,15,0.6);
  animation: pkPulse 2s ease-out infinite;
}
.pk-pulse-ring::after {
  animation-delay: 1s;
}

@keyframes pkPulse {
  0% {
    width: 10px;
    height: 10px;
    opacity: 1;
  }
  100% {
    width: 42px;
    height: 42px;
    opacity: 0;
  }
}

/* 移动端尺寸适配 */
@media (max-width: 767px) {
  .pk-pulse-ring {
    width: 24px;
    height: 24px;
  }
  @keyframes pkPulse {
    0% {
      width: 8px;
      height: 8px;
      opacity: 1;
    }
    100% {
      width: 34px;
      height: 34px;
      opacity: 0;
    }
  }
}
/* 这是饰演关系的颜色还有内链的红色 */
.action-up .vote-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* 已认可状态：填充红色、描边红色 */
.action-up.voted .vote-icon {
  fill: #e74c3c;
  stroke: #e74c3c;
}

.vod-auto-link {
    color: #e74c3c;   /* 红色调 */
    font-weight: bold;
    text-decoration: none;
}
.vod-auto-link:hover {
    text-decoration: underline;
}
.actor-link {
    color: #3498db;           /* 蓝色，可自行修改 */
    text-decoration: none;
}
.actor-link:hover {
    text-decoration: underline;
    color: #2980b9;
}
/* 这是饰演关系的颜色还有内链的红色 */







/* --- Tab 导航切换样式 --- */
/* Tab 切换系统样式 */
/* 关键修复：强制锁死整个页面，防止被内部元素撑爆导致横滑 */
/* 关键修复：强制锁死整个页面，防止被内部元素撑爆导致横滑 */
/* 防全局横滑 */
body { overflow-x: hidden; }

.tab-system-wrapper { width: 100%; margin-bottom: 0; }

.tab-header {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid #25373f;
    margin-bottom: 25px;
    padding-bottom: 15px;
    gap: 14px;
    align-items: center;
    scroll-snap-type: x proximity; 
}
.tab-header::-webkit-scrollbar { display: none; }

.tab-btn {
    position: relative;
    background: transparent;
    border: none;
    color: #7a8a8f;
    font-size: 18px;
    font-weight: 500;
    padding: 14px 26px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* 图标自适应大小（绝对只针对导航栏，不误伤图谱） */
.tab-header .tab-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    align-items: center; /* 这行 flex 对齐已经存在 */
}
.tab-header .tab-btn i.fa {
    font-size: 16px; /* 调整图标大小，适配 18px 的字 */
    vertical-align: middle;
    margin-right: 2px; /* 图标和字之间留一点点空隙 */
    display: inline-block;
}
/* 流光下划线 */
.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 40%;
    width: 20%;
    height: 3px;
    background: #00d4c6;
    border-radius: 2px;
    box-shadow: 0 0 12px #00d4c6;
    transform: scaleX(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 激活态：霓虹发光 */
.tab-btn.active {
    color: #00d4c6;
    background: rgba(0, 212, 198, 0.1);
    box-shadow: inset 0 0 30px rgba(0, 212, 198, 0.25), 0 0 15px rgba(0, 212, 198, 0.1);
}
.tab-btn.active::after {
    left: 15%;
    width: 70%;
    transform: scaleX(1);
}

.tab-body { position: relative; min-height: 50px; }
.tab-panel { display: none; opacity: 0; transform: translateY(10px); transition: all 0.4s ease; }
.tab-panel.active { display: block; opacity: 1; transform: translateY(0); animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.tab-body .detail-section {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 终极大补丁：强制图谱容器撑开 */
.detail-section [id*="graph"],
.detail-section .graph-container {
    width: 100% !important;
    min-height: 480px !important;
    height: auto !important;
    display: block !important;
}
.detail-section [id*="graph"] svg,
.detail-section .graph-container svg {
    width: 100% !important;
    height: 100% !important;
    min-height: 480px !important;
    display: block !important;
}

/* 移动端窄屏适配 */
@media (max-width: 768px) {
    .tab-btn {
        padding: 6px 10px;
        font-size: 16px;
        gap: 3px;
    }
    .tab-header .tab-btn svg { width: 12px; height: 12px; }
    .tab-header { gap: 4px; padding-bottom: 8px; }
    .tab-btn::after { bottom: -8px; height: 2px; }
}

/* 强制覆盖：只要含有 icon- 的标题，图标全变青龙色 */
[class*="icon-"] i.fa {
    color: #00CEC9 !important;
    font-size: 20px !important;
    vertical-align: middle !important;
    margin-right: 10px !important;
}

/* 【新增】统一标题布局（Flex排版 + 间距） */
.section-title-layout {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* 日期/日历图标控制 */
.icon-date {
    color: #00CEC9 !important;
    font-size: 16px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}
/* 【类型】地球/地区图标控制 */
.icon-globe {
    color: #00CEC9 !important;
    font-size: 16px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}
/* 【又名】图标控制 */
.icon-alias {
    color: #00CEC9 !important;
    font-size: 16px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}
/* 【主演】人物群像图标控制 */
.icon-cast {
    color: #00CEC9 !important;
    font-size: 16px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}
/* 【导演】个人图标控制 */
.icon-director {
    color: #00CEC9 !important;
    font-size: 16px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}
/* 【片长】时间图标控制 */
.icon-duration {
    color: #00CEC9 !important;
    font-size: 16px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}
/* 【集数】列表/序号图标控制 */
.icon-episodes {
    color: #00CEC9 !important;
    font-size: 16px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}
/* 【更新时间】时钟/刷新图标控制 */
.icon-update {
    color: #00CEC9 !important;
    font-size: 16px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}
/* 讨论标题里的高亮部分（如 第X集） */
/*.discuss-highlight {*/
/*    color: #37a !important;*/
/*}*/
/* 剧集信息的标签文字控制（如上映日期、主演等前面的灰字） */
.detail-hero__label {
    color: var(--text-secondary) !important; /* 直接读取您的原主题变量，保证颜色统一 */
}

/* ===== 手机端侧边栏布局修复（只修免责声明，不动平台布局） ===== */
@media (max-width: 768px) {
    /* 1. 强制免责声明跨越整个容器的宽度，避免被夹在 2x2 的格子里 */
    .detail-sidebar__section .info-grid .disclaimer-text {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        flex: 0 0 100% !important;     /* 强制它占满网格容器的 100% 宽度 */
        grid-column: 1 / -1 !important; /* 如果是 Grid 布局，强制跨越全部 2 列 */
        width: 100% !important;
        padding-top: 12px !important;
        margin-top: 15px !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
    }
    
    /* 2. 保证图标绝对不会被挤压变形 */
    .detail-sidebar__section .info-grid .disclaimer-text i.fa {
        flex-shrink: 0 !important;
        margin-top: 2px !important;
        font-size: 14px !important;
    }
}





/* 强制给海报父容器加相对定位，作为定位基准 */
.detail-hero__poster {
    position: relative !important;
    overflow: hidden !important;
}

/* 遮罩层：强制贴底部，彻底清除top冲突 */
.detail-hero__poster-overlay {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important; /* 关键：干掉所有可能存在的top:0样式 */
    left: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
    pointer-events: none;
    /* 底部渐变背景，保证文字在任何海报上都清晰 */
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    padding-top: 30px;
}

/* 文字样式 */
.detail-hero__poster-overlay p {
    margin: 0 !important;
    padding: 0 5px 5px !important;
    text-align: center;
    font-size: 13px;
    color: #ffffff;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    opacity: 0.9;
}
/* 强制默认就显示，取消hover才出现的效果 */
.detail-hero__poster-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* 同时覆盖海报hover时的状态，确保鼠标移上去也不会变化 */
.detail-hero__poster:hover .detail-hero__poster-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* 演员多了就展开按钮样式 */
.actor-toggle-btn {
    color: #00CEC9;
    cursor: pointer;
    margin-left: 6px;
    white-space: nowrap;
}
.actor-toggle-btn:hover {
    text-decoration: underline;
}


/* --- 分集剧情样式 --- */
.episode-summary itemscope {
    text-align: center;
    color: #ffffff;
    margin: 15px 0;
    border-bottom: 1px solid rgba(13, 115, 119, 0.2);
    padding-bottom: 15px;
}

.ep-label-prefix {
    color: #1a73e8;
    font-weight: bold;
    margin-right: 6px;
}

.ep-h3-info {
    font-size: 17px;
    color: #aaa;
    text-align: center;
    margin: 0;
    line-height: 1.6;
}

.ep-h3-desc {
    font-size: 14px;
    color: #aaa;
    margin: 0 auto; /* 上下0，左右auto，实现块级居中 */
    line-height: 1.6;
    text-align: left; /* 文字本身左对齐 */
}
.ep-h3-desc span {
    font-weight: bold;
    font-size: 14px;
    color: #e74c3c;
    margin: 0;
    line-height: 1.6;
}




/* // 报错内联表单逻辑// */
.report-btn {
    color: #00CEC9;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    background: rgba(0,206,201,0.08);
    padding: 4px 14px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid rgba(0,206,201,0.15);
    transition: all 0.2s;
}
.report-btn:hover { background: rgba(0,206,201,0.2); }

/* 内联报错表单 */
.inline-report-form {
    margin-top: 10px;
    background: rgba(13, 115, 119, 0.2);
    border: 1px solid rgba(13, 115, 119, 0.2);
    border-radius: 8px;
    padding: 15px;
    display: none;
    text-align: left;
}
.inline-report-form.active { display: block; }
.inline-report-form .form-group { margin-bottom: 10px; }
.inline-report-form label { display: block; margin-bottom: 4px; font-weight: bold; color: #7a8a8f; }
.inline-report-form input[type="text"],
.inline-report-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 13px;
}
.inline-report-form .btn-submit {
    background: #0D7377;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.inline-report-form .captcha-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inline-report-form .captcha-box img {
    height: 36px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #dcdcdc;
}

/* // 报错内联表单逻辑// */



@media (max-width: 768px) {
   /* 海报文字样式提示 */
.detail-hero__poster-overlay p {
          font-size: 10px;
}
}