/* ============================================================
   芒果 TV · 科技前沿 —— 追加 UI 样式（期次下拉等）
   在 site.css 之后加载，用于补齐原站由组件库提供的样式
   ============================================================ */

/* ---------- 期次切换下拉 ---------- */
.issue-select { position: relative; }

.issue-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 152px;
  padding: 9px 16px;
  border: 1px solid #383838;
  border-radius: 25px;
  background: #262626;
  color: #ddd;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .18s, color .18s;
  white-space: nowrap;
}
.issue-trigger:hover { border-color: #ff8a34; color: #fff; }
.issue-trigger svg { flex: none; color: #8a8a8f; transition: transform .22s; }
.issue-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.issue-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  min-width: 206px;
  padding: 6px;
  background: #202020;
  border: 1px solid #373737;
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .55);
  z-index: 60;
  /* 期次较多（一年以上）时菜单内部滚动，避免撑出视口 */
  max-height: min(62vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a transparent;
}
.issue-menu::-webkit-scrollbar { width: 8px; }
.issue-menu::-webkit-scrollbar-thumb { background: #454545; border-radius: 4px; }
.issue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #d5d5da;
  font-size: 13.5px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s, color .16s;
}
.issue-item:hover { background: #2b2b2b; }
.issue-item.active { color: #ff8a34; background: rgba(255, 138, 52, .1); }
.issue-item-count { color: #7d7d82; font-size: 11.5px; }

/* ---------- 导航栏 ---------- */
.nav-right { align-items: center; }
.nav-right > * { flex: none; }

@media (max-width: 720px) {
  .issue-trigger { min-width: 128px; font-size: 12px; padding: 7px 13px; }
  .issue-menu { min-width: 180px; }
  .nav-search kbd { display: none; }
}