:root {
  --trs-cherry: #B3081D;
  --trs-cherry-dark: #7E0614;
  --trs-strawberry: #ED9EA9;
  --trs-bubblegum: #FCD8DC;
  --trs-silver: #D3D2D6;
  --trs-vanilla: #FAFAFA;
}

/* Grid novel cards (.bs .bsx) */
.bs .bsx {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(211, 210, 214, 0.7);
  overflow: hidden;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.bs .bsx .limit {
  border-radius: 14px;
  overflow: hidden;
  background: #1a1a1a;
  position: relative;
}

.bs .bsx .limit::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.1) 90%
  );
  pointer-events: none;
}

.bs .bsx .limit img {
  object-fit: cover;
}

.bs .bsx .tt {
  padding: 8px 8px 10px;
  height: auto;
}

.bs .bsx .tt span.ntitle {
  font-family: "Merriweather", "Lora", serif;
  font-size: 0.98em;
  font-weight: 600;
  color: var(--trs-cherry);
}

.bs .bsx .tt span.nchapter {
  color: var(--trs-strawberry);
  font-weight: 500;
}

.bs .bsx .tt span.ndate {
  color: #7e7a86;
  font-size: 12px;
}

.bs .bsx .tt .rt .numscore {
  color: #827f8b;
}

.bs .bsx:hover {
  box-shadow: 0 16px 40px rgba(179, 8, 29, 0.16);
  border-color: var(--trs-strawberry);
  transform: translateY(-3px);
  background: #fff7fa;
}

/* Optional: rating stars coloring on cards */
.bs .bsx .tt .rt .rating-prc .rtp .rtb span {
  color: #ffc861;
}

/* "Hot today" cards on home (.homehot) */
.homehot .hotstack .hotoday .inhotoday {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(211, 210, 214, 0.7);
  overflow: hidden;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.homehot .hotstack .hotoday .inhotoday .todthumb {
  border-radius: 16px;
  background: #111;
}

.homehot .hotstack .hotoday .inhotoday .todthumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.1) 90%
  );
  pointer-events: none;
}

.homehot .hotstack .hotoday .inhotoday .todinfo .todtitle {
  color: var(--trs-cherry);
}

.homehot .hotstack .hotoday .inhotoday .todinfo .todgen {
  color: #7e7a86;
}

.homehot .hotstack .hotoday .inhotoday .todinfo .todsco .todnum {
  color: var(--trs-cherry);
  border-color: var(--trs-cherry);
}

.homehot .hotstack .hotoday .inhotoday .todinfo .todsco .todtext {
  background: var(--trs-cherry);
}

.homehot .hotstack .hotoday .inhotoday:hover {
  box-shadow: 0 18px 44px rgba(179, 8, 29, 0.18);
  border-color: var(--trs-strawberry);
  transform: translateY(-3px);
  background: #fff7fa;
}

/* Status ribbons (Ongoing / Completed) */
.homehot .hotstack .hotoday .inhotoday .todthumb .todstat {
  background: rgba(179, 8, 29, 0.9);
}

.homehot .hotstack .hotoday .inhotoday .todthumb .todstat.Ongoing {
  background: var(--trs-strawberry);
}

.homehot .hotstack .hotoday .inhotoday .todthumb .todstat.Completed {
  background: var(--trs-cherry-dark);
}