/* ===== TOP SERIALS (STATIC PAGE) ===== */
.top-updated{
  margin-top: 6px;
  font-size: 13px;
  color: #666;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #ededed;
  border-radius: 3px;
  background: #fff;
}
.top-updated:before{
  content: "⟳";
  font-weight: 700;
  opacity: .75;
}

.top-btn .play{
  font-size: 11px;
  line-height: 1;
}
.top-poster-empty{
  width: 64px;
  height: 96px;
  display:block;
  border-radius: 3px;
  background: #e9e9e9;
}

.top-list { counter-reset: topnum; }
.top-row { position: relative; }
.top-rank:before {
  counter-increment: topnum;
  content: counter(topnum);
}

.top-page { max-width: 1100px; margin: 0 auto; padding: 18px 12px; }
.top-head { margin-bottom: 14px; }
.top-title { margin: 0 0 6px 0; font-size: 26px; font-weight: 700; }
.top-subtitle { color: #666; font-size: 14px; }

.top-list { border: 1px solid #e6e6e6; background: #fff; }

.top-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid #ededed;
}
.top-row:last-child{ border-bottom: 0; }

.top-rank{
  width: 26px;
  flex: 0 0 26px;
  text-align: center;
  color: #444;
  font-size: 16px;
}

.top-poster{
  display:block;
  width: 64px;
  flex: 0 0 64px;
}
.top-poster img{
  width: 64px;
  height: 96px;
  object-fit: cover;
  border-radius: 3px;
  display:block;
}

.top-stars{
  width: 96px;
  flex: 0 0 96px;
  font-size: 18px;
  line-height: 1;
  user-select: none;
  letter-spacing: 1px;
}
.top-stars .star{ color:#d6d6d6; }
.top-stars .star.on{ color:#f2b01e; }

.top-main{ flex: 1 1 auto; min-width: 0; }
.top-name{
  display:inline-block;
  font-size: 16px;
  font-weight: 700;
  color:#111;
  text-decoration: none;
}
.top-name:hover{ text-decoration: underline; }

.top-meta{
  margin-top: 6px;
  font-size: 13px;
  color:#666;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}

.top-action{ flex: 0 0 auto; }
.top-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 3px;
  background: #61b44b;
  color:#fff;
  text-decoration:none;
  font-size: 13px;
  font-weight: 700;
}
.top-btn:hover{ filter: brightness(0.95); }
.top-btn .plus{
  display:inline-block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
  text-align:center;
  line-height: 18px;
  font-weight: 900;
}

@media (max-width: 640px){
  .top-row{ gap: 10px; padding: 10px; }
  .top-stars{ display:none; }
  .top-poster{ width: 54px; flex-basis: 54px; }
  .top-poster img{ width:54px; height:80px; }
  .top-btn{ padding: 7px 10px; }
}

.top-meta{
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.top-badge{
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
  color: #444;
  background: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 3px;
  white-space: nowrap;
}

.top-badge-views{
  color: #333;
}