:root {
  --bg-primary: #1f0f0f;
  --bg-secondary: #451f2a;
  --bg-tertiary: #2e0f1c;
  --text-primary: #ffffff;
  --text-secondary: #ab8990;
  --text-tertiary: #fedae7;
  --text-highlight: #f5d88e;
  --accent-pink: #fb879a;
  --border-color-light: #ab8990;
  --border-color-dark: #785e67;
}
/* CSS for section section:Header */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36px 20px 10px 20px;
  height: 24px;
}
.back-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  color: var(--text-primary);
}
.back-link img {
  width: 24px;
  height: 24px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.action-item {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  color: var(--text-primary);
}
.action-item img {
  width: 24px;
  height: 24px;
}

/* CSS for section section:Hero */
.hero-section {
  background-color: var(--bg-secondary);
  padding: 10px 0 0;
  border-radius: 20px;
  border: 0.5px solid var(--border-color-light);
}
.tabs-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px 10px;
}
.tabs {
  display: flex;
  background: linear-gradient(to bottom, #351820, #451f2a 78%, #6f3949);
  border-radius: 20px;
  padding: 3px;
  border: 0.5px solid #733849;
}
.tab-button {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  padding: 4.5px 10.5px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
}
.tab-button.active {
  background: linear-gradient(to bottom, #ffffff, #fecdd1);
  color: #27244b;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
}
.search-icon img {
  width: 20px;
  height: 20px;
}
.comic-info-container {
  display: flex;
  gap: 10px;
  padding: 10.5px 10px;
  background-color: var(--bg-primary);
}
.comic-cover {
  width: 160px;
  height: 200px;
  flex-shrink: 0;
  border-radius: 3px;
  overflow: hidden;
}
.comic-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comic-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-primary);
  font-size: 12px;
  width: calc(100% - 170px);
}
.comic-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: var(--text-primary);
}
.comic-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.stat-item img {
  width: 12px;
  height: 12px;
}
.comic-description, .comic-update-status {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
}
.comic-description .label, .comic-update-status .label {
  flex-shrink: 0;
  padding-right: 4px;
  border-right: 1px solid var(--text-tertiary);
}
.comic-description p {
  margin: 0;
}
.comic-tags {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  overflow-x: auto;
  white-space:nowrap;
  padding: 5px 0 15px 0;
}
.tag {
  color: var(--text-tertiary);
  font-size: 12px;
  white-space: nowrap;
}
.action-buttons {
  display: flex;
  border-top: 1px solid var(--border-color-light);
}
.action-button {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 52px;
  font-size: 14px;
  color: var(--text-primary);
}
.action-button.favorites {
  border-right: 0.5px solid var(--border-color-light);
}
.action-button img {
  width: 24px;
  height: 24px;
}
.action-button .highlight {
  color: var(--text-highlight);
}

/* CSS for section section:Episodes */
.episodes-section {
  padding: 10px 0;
  background-color: #1f0e0f;
}
.plan-note {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 5px 20px;
  margin: 0;
}
.episode-list {
  list-style: none;
  padding: 0 20px 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.episode-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-secondary);
  border: 0.5px solid var(--border-color-dark);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-secondary);
}
.episode-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: auto;
}
.episode-title-group .separator {
  width: 1px;
  height: 12px;
  background-color: var(--text-secondary);
}
.episode-point{
  padding: 0 10px;
  color: #F5D88E;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.episode-point img{
  width: 24px;
}

.episode-status {
  display: flex;
  align-items: center;
  gap: 3px;
  border-left: 1px solid var(--border-color-dark);
  padding: 4px 0 4px 6px;
  height: 16px;
  width: 60px;
  box-sizing: border-box;
}
.episode-status.free {
  color: #fff5f8;
}
.episode-status.locked {
  color: var(--text-secondary);
}
.episode-status.viewed {
  color: var(--text-secondary);
}
.episode-status img {
  width: 14px;
  height: 14px;
}
.pagination-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  background-color: #451F2A;
}
.pagination-dots .point{
  width: 5px;
  height: 5px;
  background-color: #F66986;
  border-radius: 10px;
}
.pagination-dots .point.focus{
  width: 30px;
}

/* CSS for section section:Recommendations */
.recommendations-section {
  background-color: var(--bg-primary);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.recommendations-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-title {
  font-size: 14px;
  color: var(--accent-pink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title img {
  width: 10px;
  height: 14px;
}
.card-grid {
  display: flex;
  gap: 9px;
  overflow-x: auto;
}
/*.comic-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  display: block;
  aspect-ratio: 100 / 150;
  width: 110px;
  flex-shrink: 0;
}*/
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6.5px 5px;
  background: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0));
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.card-title {
  font-size: 14px;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-stats {
  font-size: 12px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 5px;
}
.card-stats img {
  width: 12px;
  height: 12px;
}

/* CSS for section section:Footer */

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
  flex: 1;
}
.nav-item.active {
  color: var(--text-primary);
}
.nav-item img {
  width: 20px;
  height: 20px;
}



.horizontal-list {
  /* 1. 改为 Grid 布局 */
  display: grid;
  
  /* 2. 强制分为 3 列，每列等宽 */
  grid-template-columns: repeat(3, 1fr);
  
  /* 3. 设置上下左右的间距一致 (这里设为 10px) */
  gap: 10px;
  
  /* 4. 移除原本的横向滚动相关属性 */
  overflow-x: visible; 
  padding-right: 0;
  margin-bottom: 10px;
  width: 100%;
}

.comic-card {
  /* 5. 移除固定宽度，让它随 Grid 列宽自适应 */
  width: 100%; 
  flex-shrink: 1;
}
.comic-card a{
    color: #fff;
}

.card-image-wrapper {
  position: relative;
  /* 建议：如果宽度自适应了，高度可以设为 auto 并配合 aspect-ratio 保持比例 */
  height: 150px; 
  border-radius: 4px;
  overflow: hidden;
}

.card-serial01{
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  background-color: #ff7d7d;
  padding: 1px 3px;
  border-radius: 4px;
}
.card-serial02{
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  background-color: #3c3d78;
  padding: 1px 3px;
  border-radius: 4px;
}
.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 5px;
  box-sizing: border-box;
}
.card-tag {
  font-size: 10px;
  margin-bottom: 2px;
}
.card-stats-overlay {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
}
.card-stats-overlay img {
  width: 10px;
  height: 10px;
}