/*
  文件：css/overrides.css
  作用：最后加载的覆盖层，用于特殊/临时样式覆盖。
  注释语言：中文
*/

/* 热榜组件 - 毛玻璃风格 */
.hotlist {
  display: flex;
    gap: 8px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    height: 70px;
}

/* 覆盖保证：音乐列表弹窗 hover 高亮与阴影效果（保留，限定作用域） */
.music-list-popup .music-item:hover{ background: rgba(255,255,255,0.10); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.music-list-popup .music-item:active{ transform: translateY(-1px); background: rgba(255,255,255,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.22); }
/* 弱化选中状态：默认不凸起，仅轻微背景 */
.music-list-popup .music-item.active{ background: rgba(255,255,255,0.10); box-shadow: none; }
.music-list-popup .music-item .duration{ font-variant-numeric: tabular-nums; opacity:.95; margin-left:10px; }
.hotlist-left {
  display: flex;
  gap: 5px;
  flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
.hl-btn {
  font-size: 10px; /* 缩小按钮字体 */
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.25);
  border-radius: 5px;
  cursor: pointer;
  padding: 3 6px;
}
.hl-btn:hover {
  background: rgba(255,255,255,0.22);
}
.hl-btn.active {
  background: rgba(255,255,255,0.22);
}
.hotlist-right {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 18px; /* 内容 + 右侧翻页条 */
  gap: 6px;
}
.hotlist-content {
  overflow: hidden; /* 仅显示当前页三行 */
  padding: 0 2px;
}
.hotlist-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hotlist-item {
  display: grid; /* 内部采用三列布局：序号 | 标题 | 热度 */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  height: 20px; /* 控制每页显示四行，缩小 */
  color: rgba(255,255,255,0.9);
  font-size: 12px; /* 缩小新闻列表字体大小 */
  cursor: pointer;
  transition: transform 0.2s ease;
  border-radius: 5px;
  padding: 0 4px;
}
.hotlist-item:hover {
  transform: scale(1.02);
  background: rgba(255,255,255,0.08);
}
.hotlist-item .index {
  width: auto; /* 宽度自适应内容 */
  text-align: left; /* 靠左对齐 */
  justify-self: start;
  font-weight: bold;
  transition: transform 0.2s ease;
}
/* 数字1-4的颜色渐变：从白到灰 */
.hotlist-item:nth-child(1) .index {
  color: rgba(255,255,255,1); /* 第1个：纯白 */
}
.hotlist-item:nth-child(2) .index {
  color: rgba(255,255,255,0.85); /* 第2个：稍微灰一点 */
}
.hotlist-item:nth-child(3) .index {
  color: rgba(255,255,255,0.7); /* 第3个：更灰 */
}
.hotlist-item:nth-child(4) .index {
  color: rgba(255,255,255,0.55); /* 第4个：灰色 */
}
/* 第5个及以后：全部为灰色 */
.hotlist-item:nth-child(n+5) .index {
  color: rgba(255,255,255,0.55);
}
.hotlist-item:hover .index {
  transform: scale(1.1);
}
.hotlist-item a {
  color: rgba(255,255,255,0.96);
  text-decoration: none;
  max-width: calc(100% - 24px); /* 预留热度约20px+间距 */
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 标题过长省略号 */
  transition: transform 0.2s ease;
}
.hotlist-item:hover a {
  text-decoration: none;
}
/* 标题右侧热度 */
.hotlist-item .hot {
  margin-left: 0; /* 移除自动左外边距 */
  justify-self: end; /* 靠右对齐到最右侧 */
  white-space: nowrap; /* 不换行，不做省略号 */
  color: rgba(255,255,255,0.6); /* 亮灰色 */
  font-size: 12px;
}
.hotlist-pager {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.hl-page-btn {
  width: 15px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.hl-page-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}
@keyframes upDownBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.hl-page-btn.bounce {
  animation: upDownBounce 1.2s infinite;
}

/* 日历弹窗配色覆盖：采用与音乐弹窗相同的玻璃半透明风格（不改布局） */
.calendar-popup{ background: rgba(255,255,255,0.10) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.20) !important; box-shadow: 0 25px 80px rgba(0,0,0,0.30) !important; color:#fff; }
.calendar-header{ background: rgba(255,255,255,0.08) !important; color:#fff !important; box-shadow: none !important; }
.calendar-left{ background: rgba(255,255,255,0.06) !important; border-right: 1px solid rgba(255,255,255,0.12) !important; }
.calendar-right{ background: rgba(255,255,255,0.06) !important; }
.weekday{ background: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.90) !important; }
.calendar-date{ background: rgba(255,255,255,0.08) !important; border-color: transparent !important; }
.calendar-date:hover{ background: rgba(255,255,255,0.16) !important; box-shadow: 0 4px 12px rgba(255,255,255,0.08) !important; }
.calendar-date.today{ background: rgba(255,255,255,0.18) !important; color:#fff !important; }
.calendar-date.selected{ background: rgba(255,255,255,0.14) !important; border-color: rgba(255,255,255,0.28) !important; color:#fff !important; }
.calendar-date.other-month{ color: rgba(255,255,255,0.55) !important; background: rgba(255,255,255,0.04) !important; }
.calendar-date.other-month:hover{ background: rgba(255,255,255,0.08) !important; }
.calendar-right .date-number{ color:#fff !important; background: rgba(255,255,255,0.18) !important; }
.date-info-card{ background: rgba(255,255,255,0.08) !important; box-shadow: none !important; }
.almanac-content{ background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.10) !important; color:#fff !important; }
.almanac-details{ background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.12) !important; }
.solar-term{ background: rgba(255,255,255,0.18) !important; color:#fff !important; border: 1px solid rgba(255,255,255,0.20) !important; }