/* ShortVideo episode picker styles. Extracted from index.html during frontend split stage 1. */

.episode-picker-box { width:min(94vw,720px); max-width:720px; max-height:86dvh; padding:16px; }
#episodePickerModal { align-items:flex-end; justify-content:center; padding:24px 12px 0; }
#episodePickerModal .episode-picker-box {
  width:min(100vw,720px); max-height:min(86dvh,720px);
  border-radius:18px 18px 0 0;
  transform:translateY(100%);
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
#episodePickerModal.sheet-open .episode-picker-box { transform:translateY(0); }
.episode-picker-head { display:flex; gap:10px; align-items:center; justify-content:space-between; }
.episode-picker-title { min-width:0; font-size:15px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.episode-picker-sub { font-size:12px; color:rgba(255,255,255,.48); margin-top:2px; }
.episode-picker-close { border:none; background:rgba(255,255,255,.1); color:#fff; border-radius:999px; width:30px; height:30px; cursor:pointer; }
.episode-jump-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.episode-picker-mode-toggle { display:flex; gap:6px; align-items:center; }
.episode-picker-mode-btn,
.episode-picker-action-btn { width:32px; height:32px; border:none; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.58); cursor:pointer; font-size:17px; display:inline-flex; align-items:center; justify-content:center; }
.episode-picker-mode-btn.active { background:rgba(88,215,199,.18); color:#9bf4ea; }
.episode-picker-mode-btn:hover,
.episode-picker-action-btn:hover { color:#fff; background:rgba(255,255,255,.14); }
.episode-picker-order-toggle { display:flex; gap:6px; align-items:center; margin-left:auto; }
.episode-picker-action-btn.active { background:rgba(255,45,85,.18); color:#ff7aa8; }
.episode-jump-row input { flex:1; min-width:120px; }
.episode-picker-grid { overflow-y:auto; -webkit-overflow-scrolling:touch; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding-right:2px; max-height:min(62dvh,560px); min-height:0; align-content:start; }
.episode-picker-grid.is-grid-mode {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-rows:auto !important;
  gap:6px !important;
  padding:0 2px 0 0 !important;
  align-content:start !important;
  align-items:start !important;
}
.episode-picker-grid.is-list-mode { display:flex !important; flex-direction:column !important; gap:0 !important; padding:0 !important; }
.episode-picker-card { position:relative; min-width:0; width:100%; aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:#111; border:1px solid rgba(255,255,255,.07); cursor:pointer; }
.episode-picker-grid.is-grid-mode .episode-picker-card {
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:0 !important;
  padding-bottom:133.33% !important;
  aspect-ratio:unset !important;
  margin:0 !important;
  transform:none !important;
}
.episode-picker-grid.is-grid-mode .episode-picker-card > img {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.episode-picker-grid.is-grid-mode .episode-picker-card.is-landscape > img { object-fit:cover !important; background:#000; }
.episode-picker-card.is-current { border-color:#ff4f87; box-shadow:0 0 0 2px rgba(255,79,135,.22); }
.episode-picker-card > img { width:100%; height:100%; object-fit:cover; display:block; }
.episode-picker-card.is-landscape > img { object-fit:contain; background:#000; }
.episode-card-meta { position:absolute; left:0; right:0; bottom:0; padding:18px 6px 5px; background:linear-gradient(transparent,rgba(0,0,0,.78)); font-size:11px; color:#fff; display:flex; align-items:flex-end; justify-content:space-between; gap:6px; }
.episode-card-meta.has-title { flex-direction:column; align-items:stretch; gap:4px; padding-top:28px; }
.episode-card-title { color:rgba(255,255,255,.92); font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.72); }
.episode-card-badge-row { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; }
.episode-card-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:999px; background:rgba(0,0,0,.45); }
.episode-card-duration { color:#fff; font-weight:600; }
.episode-card-episode { color:rgba(255,255,255,.8); }

/* 列表模式：参考图的单列横向条目 */
.episode-picker-grid.is-list-mode .episode-picker-card {
  display:flex; align-items:flex-start; gap:14px;
  aspect-ratio:auto; min-height:106px; padding:14px 0;
  border:none; border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0; background:transparent; box-shadow:none;
}
.episode-picker-grid.is-list-mode .episode-picker-card:last-child { border-bottom:none; }
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-thumb {
  flex:0 0 168px; width:168px; height:94px; border-radius:10px; overflow:hidden; background:#000; position:relative;
}
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-thumb.is-landscape img { object-fit:cover; background:#000; }
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-thumb .episode-list-dur {
  position:absolute; right:6px; bottom:6px; padding:1px 6px; border-radius:999px;
  background:rgba(0,0,0,.72); color:#fff; font-size:11px; font-weight:600; line-height:1.4;
}
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-info {
  flex:1; min-width:0; min-height:94px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding-right:2px;
}
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-name-row { display:flex; align-items:flex-start; gap:8px; min-width:0; margin-top:6px; }
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-playing {
  width:12px; flex:0 0 12px; display:none; align-items:flex-end; gap:2px; height:18px; margin-top:2px;
}
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-playing span {
  width:3px; border-radius:999px; background:#ff4f87; display:block; animation:episodeNowPlaying 1s ease-in-out infinite;
}
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-playing span:nth-child(1) { height:8px; animation-delay:0s; }
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-playing span:nth-child(2) { height:16px; animation-delay:.18s; }
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-playing span:nth-child(3) { height:11px; animation-delay:.36s; }
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-name {
  flex:1; min-width:0; font-size:15px; color:rgba(255,255,255,.92); overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35; font-weight:500;
}
.episode-picker-grid.is-list-mode .episode-picker-card .episode-list-date {
  font-size:12px; color:rgba(255,255,255,.55); line-height:1.2; min-height:14px; padding-left:20px; margin-bottom:6px;
}
.episode-picker-grid.is-list-mode .episode-picker-card.is-current {
  box-shadow:none; background:rgba(255,79,135,.06);
}
.episode-picker-grid.is-list-mode .episode-picker-card.is-current .episode-list-name { color:#ff7aa8; }
.episode-picker-grid.is-list-mode .episode-picker-card.is-current .episode-list-playing { display:flex; }
.episode-picker-grid.is-list-mode .episode-picker-card.is-current .episode-list-date { color:rgba(255,122,168,.82); }
.episode-picker-grid.is-list-mode .episode-picker-card .episode-card-meta { display:none; }
@keyframes episodeNowPlaying {
  0%, 100% { transform:scaleY(.55); opacity:.62; }
  50% { transform:scaleY(1); opacity:1; }
}
@media (max-width: 560px) {
  .episode-picker-grid.is-grid-mode { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; }
  .episode-picker-grid.is-grid-mode .episode-picker-card { width:100% !important; aspect-ratio:3/4 !important; }
  .episode-picker-grid.is-grid-mode .episode-picker-card > img { object-fit:cover !important; }
  .episode-picker-grid.is-list-mode .episode-picker-card { gap:12px; padding:16px 0; min-height:128px; align-items:flex-start; }
  .episode-picker-grid.is-list-mode .episode-picker-card .episode-list-thumb { flex:0 0 168px; width:168px; height:94px; }
  .episode-picker-grid.is-list-mode .episode-picker-card .episode-list-info { min-height:94px; justify-content:space-between; }
  .episode-picker-grid.is-list-mode .episode-picker-card .episode-list-name { font-size:15px; }
  .episode-picker-grid { max-height:min(68dvh,620px); }
}