/* 聚合站 SDK 样式 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #101218; color: #dfe3ea; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }

.header { display: flex; align-items: center; gap: 18px; padding: 12px 20px; background: #171a22; position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.logo { font-size: 20px; font-weight: 700; color: #4fc3f7; white-space: nowrap; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-link { padding: 6px 12px; border-radius: 6px; font-size: 14px; }
.nav-link:hover { background: #262b36; color: #4fc3f7; }
.search-input { margin-left: auto; width: 220px; max-width: 40vw; padding: 8px 12px; border-radius: 8px; border: 1px solid #2c3340; background: #1d212b; color: inherit; }

.page { padding: 16px 20px 30px; max-width: 1280px; margin: 0 auto; }
.sec-title { font-size: 18px; margin: 8px 0 12px; color: #9fb0c7; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card { border-radius: 10px; overflow: hidden; background: #171a22; transition: transform .15s; }
.card:hover { transform: translateY(-3px); }
.card-cover { position: relative; aspect-ratio: 16/9; background: #0c0e12; }
.card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.72); color: #ffd54f; font-size: 12px; padding: 2px 6px; border-radius: 4px; }
.card-title { font-size: 14px; padding: 8px 10px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { font-size: 12px; color: #7b8798; padding: 0 10px 10px; }
.card-meta img, .card-meta svg { display: none; }

.sk-block { aspect-ratio: 16/9; background: #1d212b; border-radius: 10px 10px 0 0; }
.sk-line { height: 14px; margin: 10px; border-radius: 4px; background: #1d212b; }
.sentinel { height: 1px; }

.err-box { padding: 40px 20px; text-align: center; color: #8a93a6; }
.list-info { font-size: 13px; color: #7b8798; margin-bottom: 10px; }
.sub-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sub-tab { padding: 5px 14px; border-radius: 16px; background: #f5f7fa; border: 1px solid #d5dae2; color: #3a4150; font-size: 13px; }
.sub-tab.active { background: #1565c0; border-color: #1565c0; color: #fff; }
.sub-tab:hover { border-color: #1565c0; color: #1565c0; }

.player-area { background: #000; border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.player-area video { width: 100%; aspect-ratio: 16/9; display: block; background: #000; }
.play-error { padding: 18px; text-align: center; color: #ff8a80; }

.src-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.src-tab { padding: 6px 14px; border-radius: 20px; border: 1px solid #2c3340; background: #1d212b; color: inherit; cursor: pointer; font-size: 13px; }
.src-tab.active { background: #4fc3f7; border-color: #4fc3f7; color: #101218; }

.eps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ep { padding: 5px 12px; border-radius: 6px; border: 1px solid #2c3340; background: #1d212b; color: inherit; font-size: 13px; cursor: pointer; }
.ep:hover { border-color: #4fc3f7; }

.video-info { margin-bottom: 14px; }
.video-info h1 { font-size: 22px; margin-bottom: 8px; }
.meta { color: #8a93a6; font-size: 13px; margin-bottom: 4px; }
.desc { margin-top: 10px; font-size: 14px; line-height: 1.7; color: #b8c2d4; }

.feedback { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14px; }
.fb-btn { padding: 5px 12px; border-radius: 6px; border: 1px solid #2c3340; background: #1d212b; color: inherit; cursor: pointer; }
.fb-btn:disabled { opacity: .5; cursor: default; }
.fb-ok { color: #69db7c; font-size: 13px; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-chip { padding: 6px 14px; border-radius: 20px; background: #1d212b; border: 1px solid #2c3340; font-size: 13px; }
.tag-chip:hover { border-color: #4fc3f7; color: #4fc3f7; }

.footer { text-align: center; color: #5b6474; font-size: 12px; padding: 20px; }

@media (max-width: 640px) {
  .search-input { width: 100%; max-width: none; margin: 4px 0 0; order: 10; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}