/* ================= LATEST CHAPTERS (dark row-list) ================= */

.latest-chapters{
  background:#111319;
  border-radius:16px;
  overflow:hidden;
  max-width:1200px;
  margin:0 auto;
  padding:4px 0;
}

.lc-row{
  display:flex;
  gap:20px;
  padding:22px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.lc-row:last-child{
  border-bottom:none;
}

.lc-cover{
  flex-shrink:0;
  width:130px;
  height:180px;
  border-radius:8px;
  overflow:hidden;
  background:#1c1f2b;
}

.lc-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.lc-body{
  flex:1;
  min-width:0;
}

.lc-title{
  color:#fff;
  font-size:20px;
  font-weight:800;
  line-height:1.25;
  text-decoration:none;
  display:block;
  margin-bottom:18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lc-title:hover{
  color:#a855f7;
}

.lc-chapter-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  row-gap:2px;
  justify-content:space-between;
  gap:6px;
  padding:11px 0;
  text-decoration:none;
}

.lc-chapter-left{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  flex:1;
}

.lc-chapter-name{
  position:relative;
  color:#d7d9e2;
  font-size:18px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:4px 6px;
  border-radius:6px;
  flex-shrink:1;
  min-width:max-content;
}

.lc-chapter-time{
  color:#8a8d99;
  font-size:12px;
  flex-shrink:0;
  white-space:nowrap;
  margin-left:14px;
  text-align:right;
}

/* ================= READ CHAPTER FEEDBACK ================= */

.lc-chapter-row.is-read .lc-chapter-name{
  color:#a855f7;
}

/* ================= NEW CHAPTER EFFECT ================= */

.lc-chapter-row.is-new .lc-chapter-name{
  color:#fff;
  font-weight:700;
  isolation:isolate;
}

/* Moving purple swipe */
.lc-chapter-row.is-new .lc-chapter-name::before{
  content:"";
  position:absolute;
  top:0;
  left:-140%;
  width:130%;
  height:100%;
  background:linear-gradient(
      90deg,
      transparent 0%,
      #7b2fd1 18%,
      #a855f7 50%,
      #7b2fd1 82%,
      transparent 100%
  );
  transform:skewX(-28deg);
  z-index:-1;
  animation:newChapterSwipe 2s linear infinite;
}

/* Glow */
.lc-chapter-row.is-new .lc-chapter-name::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  box-shadow:0 0 12px rgba(144,61,224,.45);
  opacity:0;
  animation:newChapterGlow 2s linear infinite;
}

.lc-chapter-row.is-new .lc-chapter-time{
  color:#903DE0;
  font-weight:600;
}

@keyframes newChapterSwipe{
  0%{
      left:140%;
  }
  20%{
      left:140%;
  }
  100%{
      left:-140%;
  }
}

@keyframes newChapterGlow{
  0%,20%{
      opacity:0;
  }
  25%,75%{
      opacity:1;
  }
  100%{
      opacity:0;
  }
}

.lc-new-badge{
  display:none;
}

/* ================= MOBILE ================= */

@media(max-width:480px){

  .lc-row{
      gap:14px;
      padding:16px 14px;
  }

  .lc-cover{
      width:100px;
      height:138px;
  }

  .lc-title{
      font-size:16px;
      margin-bottom:12px;
  }

  .lc-chapter-row{
      padding:8px 0;
      gap:4px;
  }

  .lc-chapter-left{
      gap:4px;
  }

  .lc-chapter-name{
      font-size:14px;
      padding:3px 6px;
  }

  .lc-chapter-time{
      font-size:11px;
  }

}

/* ================= PAGINATION ================= */

.lc-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #262a38;
  overflow:hidden;
}

.lc-page-num,
.lc-page-arrow{
  min-width:44px;
  height:44px;
  padding:0 10px;
  border:none;
  border-radius:10px;
  background:#1c1f2b;
  color:#d7d9e2;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  transition:.15s ease;
}

.lc-page-num:hover:not(.active),
.lc-page-arrow:hover:not(:disabled){
  background:#262a38;
  color:#fff;
}

.lc-page-num.active{
  background:#0077ff;
  color:#fff;
}

.lc-page-arrow{
  color:#8a8d99;
}

.lc-page-arrow:disabled{
  opacity:.35;
  cursor:default;
}

.lc-page-ellipsis{
  color:#8a8d99;
  font-weight:800;
  padding:0 4px;
}

@media(max-width:480px){

  .lc-pagination{
      gap:5px;
  }

  .lc-page-num,
  .lc-page-arrow{
      min-width:32px;
      height:32px;
      padding:0 4px;
      border-radius:8px;
      font-size:13px;
  }

}