.says-card {
  --says-bg: #f6fefe;
  --says-text: #24292f;
  --says-muted: #667085;
  --says-border: #e8e8e8;
  --says-border-hover: #cbd5e1;
  --says-accent: #3354aa;
  --says-accent-contrast: #ffffff;
  --says-subtle-bg: #f8f9fb;
  --says-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 16px rgba(16, 24, 40, 0.05);
  --says-shadow-hover: 0 8px 24px rgba(16, 24, 40, 0.10);

  margin: 1rem auto 2rem;
  padding: 1.5rem;
  border: 1px solid var(--says-border);
  border-radius: 0.75rem;
  background: var(--says-bg);
  color: var(--says-text);
  box-shadow: var(--says-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.says-card:hover {
  transform: translateY(-2px);
  border-color: var(--says-border-hover);
  box-shadow: var(--says-shadow-hover);
}

.says-card .says-content {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--says-text);
  overflow-wrap: anywhere;
}

.says-card .says-content > :first-child { margin-top: 0; }
.says-card .says-content > :last-child { margin-bottom: 0; }

.says-card .says-content a { color: var(--says-accent); text-decoration: none; }
.says-card .says-content a:hover { text-decoration: underline; }

.says-card .says-content code {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--says-border);
  border-radius: 0.25rem;
  background: var(--says-subtle-bg);
}

.says-card .says-content pre {
  padding: 0.75rem;
  overflow: auto;
  border: 1px solid var(--says-border);
  border-radius: 0.5rem;
  background: var(--says-subtle-bg);
}

.says-card .says-content blockquote {
  margin: 0.75rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--says-accent);
  color: var(--says-muted);
}

.says-card .says-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--says-border);
  color: var(--says-muted);
  font-size: 0.875rem;
}

.says-card .says-content .tag-span { color: var(--says-accent); font-weight: 500; }

.says-card .says-content .thumb {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.5rem auto;
  border-radius: 0.375rem;
}

.says-card .says-content .bilivideo {
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 55%;
  margin: 0.5rem 0;
  overflow: hidden;
  border-radius: 0.5rem;
}

.says-card .says-content .bilivideo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.says-card .says-content .douban-card {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0.75rem;
  margin: 1rem auto;
  border: 1px solid var(--says-border);
  border-radius: 0.5rem;
  background: var(--says-subtle-bg);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

.says-card .says-content .douban-card .cover { display: flex; margin-right: 1rem; flex-direction: column; }
.says-card .says-content .douban-card .cover .cover-img { height: 8rem; width: 6rem; object-fit: cover; border-radius: 0.375rem; }
.says-card .says-content .douban-card .info { display: flex; flex: 1; flex-direction: column; position: relative; }
.says-card .says-content .douban-card .info .douban-card-desc { font-size: 0.875rem; color: var(--says-muted); }
.says-card .says-content .douban-card .info .rating-text { line-height: 1rem; margin-left: 0.25rem; color: var(--says-muted); }

.says-card .says-content .douban-card .douban-card-type {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.875rem;
  font-style: italic;
  background-color: var(--says-accent);
  color: var(--says-accent-contrast);
  padding: 0.25rem 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.says-card.bb-container {
  margin-block: auto;
  padding: 0.75rem 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.says-card.bb-container:hover {
  transform: none;
  border: 0;
  box-shadow: none;
}

.says-card.bb-container .bb-load {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: unset;
  color: var(--says-muted);
  line-height: 1.2rem;
  cursor: pointer;
  transition: color 0.18s ease;
}

.says-card.bb-container .bb-load:hover { color: var(--says-accent); }
.rating-star{display:inline-block;width:75px;height:15px;margin-right:12px;background-repeat:no-repeat;background-position:0 center;background-image:url('data:image/png;background-repeat:no-repeat;    base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAClCAYAAAAUAAAYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5xJREFUeNrs3T9rFEEcxvG7qEQIglaCICKkin9AUEtBKxU7wS61VlYivgWj70TtNFj5BqzE7qxEWwsxKIoYn4UtluFmbm8nczvzm+/BjxyuDwNzu3uXD0+46f7LC5PA45Hm+WTYw1x2LRDc0jzTXB+wqMlsaLPutz8fDFjYZHYauAz3NBvt83XNnyUWNpn1nVm3OsHmsb3EomazzZnVXKMPNcc0xzUnNKc0Rzv/77fms+Z7O3vt9b1eU7bZrNN68l5zcolX4ofmsuZXTdnmMvyi2dR86Bmcac62P6vKrnVubpc0bxYE32nOab45N8YqsvPeDfcD4SOav4HjprPuu+H5BTt9LXDMfNbdLPfT678Fx6vKupt1o/O8+R3pkOaJ5/iktqx7z/qp+aq5q/nY+fczmheaK03Gs7D5rLtZdzSvA6/Ebc2u55j57HQB0TzW7AzkjiKzny6+2hlKNE8juMNcFqKBaIZndRlCNBBNgmx7ZkE0fbLtZkE0EA1EM17WuQwhGogGooFoss6296y52cNO+J6HLJoPaFdbsvA9zGerIxrPh85eWYgGooFoDiQbuAxp0UA0EVmdWbRo+ma1WbRoIBqIZtzsnHdDWjQQDUQD0WSbde5ZS2UhmtqJJtSEiVkXooFoIJre2VATJmZdiKZ2ogk1YSb8oVMvDeUPnSAaiCaPJkzMuhANRAPRQDQpsqEmTMy6EI11oolpwkA0EA1EcyDZmCYMRAPR+LMxTZjqiCamCQPRQDQQzehNGIgGooFoIJpVZ2OaMBBN7USTqgkD0UA0EE3vbKomDERTO9GkasKYJJpUTRiIBqKBaEZvwkA0EA1EA9GkyKZqwkA01olmrCYMRAPRQDR9LkO+0QmiKbAJUyTRjNWEgWggGohm9CYMRAPRQDQQzZDsWE0YiMYC0eTYhIFoIJrKiCbHJgxEY4FocmzCZEs0OTZhIBqIpjKiybEJA9FANBANROPL5tiEgWhKIJoSmzAQDURjjGhKbMJANCUQTYlNmNGIpsQmDEQD0RgjmhKbMBANRAPR1Es0JTZhIJpciMZaEwaigWgKJBprTRiIJheisdaESUo01powEA1EUyDRWGvCQDQQDURjm2isNWEgmlURzWw2q4pZIBqIJkOiCVyGJpkFolkV0ejMMvel28mIRptl7ku3IRqIpjCimfNuaJpZIBqIBqIpm2ice5Z5ZonJupvVkMRu4JW4qXnrOWY++1+AAQBw9BJSCTeN9wAAAABJRU5ErkJggg==');overflow:hidden}
.allstar10{background-position:0 0}
.allstar9{background-position:0 -15px}
.allstar8{background-position:0 -30px}
.allstar7{background-position:0 -45px}
.allstar6{background-position:0 -60px}
.allstar5{background-position:0 -75px}
.allstar4{background-position:0 -90px}
.allstar3{background-position:0 -105px}
.allstar2{background-position:0 -120px}
.allstar1{background-position:0 -135px}
.allstar0{background-position:0 -150px}

html.dark .says-card {
  --says-bg: #1e2430;
  --says-text: #e6e8ee;
  --says-muted: #9aa3b2;
  --says-border: rgba(255, 255, 255, 0.09);
  --says-border-hover: rgba(255, 255, 255, 0.20);
  --says-accent: #8ea7ff;
  --says-accent-contrast: #111827;
  --says-subtle-bg: #242c3a;
  --says-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.22);
  --says-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.32);
}

/* @media (prefers-color-scheme: dark)类型的暗色模式设置会覆盖html.dark .says-card的设置，建议使用html.dark .says-card来设置暗色模式 */
/* @media (prefers-color-scheme: dark) {
  .says-card {
    --says-bg: #1e2430;
    --says-text: #e6e8ee;
    --says-muted: #9aa3b2;
    --says-border: rgba(255, 255, 255, 0.09);
    --says-border-hover: rgba(255, 255, 255, 0.20);
    --says-accent: #8ea7ff;
    --says-accent-contrast: #111827;
    --says-subtle-bg: #242c3a;
    --says-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.22);
    --says-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.32);
  }
} */

.says-timeline {
  --says-timeline-bg: #ffffff;
  --says-timeline-text: #24292f;
  --says-timeline-muted: #667085;
  --says-timeline-border: #e8e8e8;
  --says-timeline-border-hover: #cbd5e1;
  --says-timeline-accent: #3354aa;
  --says-timeline-accent-contrast: #ffffff;
  --says-timeline-subtle-bg: #f8f9fb;
  --says-timeline-line: #e8e8e8;

  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem;
}

.says-timeline__rail {
  position: relative;
  min-width: 0;
}

.says-timeline__axis {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 9px;
  width: 2px;
  background: var(--says-timeline-line);
}

.says-timeline__months {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.says-timeline__node {
  position: relative;
  width: 100%;
  padding: 0.45rem 0.25rem 0.45rem 1.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--says-timeline-muted);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.says-timeline__node::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--says-timeline-border);
  border-radius: 50%;
  background: var(--says-timeline-bg);
  transform: translateY(-50%);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.says-timeline__node:hover,
.says-timeline__node.is-active {
  color: var(--says-timeline-accent);
}

.says-timeline__node.is-active::before {
  border-color: var(--says-timeline-accent);
  background: var(--says-timeline-accent);
}

.says-timeline__content {
  min-width: 0;
}

.says-timeline__entries {
  display: flex;
  flex-direction: column;
}

.says-timeline__entries .says-card {
  margin: 0 0 1.25rem;
}

.says-timeline__load {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--says-timeline-border);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--says-timeline-muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.says-timeline__load:hover,
.says-timeline__load.is-loading {
  color: var(--says-timeline-accent);
  border-color: var(--says-timeline-border-hover);
}

.says-timeline__load.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.says-timeline__status {
  margin-top: 0.75rem;
  color: var(--says-timeline-muted);
  font-size: 0.875rem;
  text-align: center;
}

.says-timeline__retry {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--says-timeline-border);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--says-timeline-accent);
  cursor: pointer;
}

.says-timeline__retry:hover {
  border-color: var(--says-timeline-border-hover);
}

html.dark .says-timeline {
  --says-timeline-bg: #1e2430;
  --says-timeline-text: #e6e8ee;
  --says-timeline-muted: #9aa3b2;
  --says-timeline-border: rgba(255, 255, 255, 0.09);
  --says-timeline-border-hover: rgba(255, 255, 255, 0.20);
  --says-timeline-accent: #8ea7ff;
  --says-timeline-accent-contrast: #111827;
  --says-timeline-subtle-bg: #242c3a;
  --says-timeline-line: rgba(255, 255, 255, 0.14);
}

/* 同样的，@media (prefers-color-scheme: dark)类型的暗色模式设置会覆盖html.dark .says-timeline的设置，建议使用html.dark .says-card来设置暗色模式 */
/* @media (prefers-color-scheme: dark) {
  .says-timeline {
    --says-timeline-bg: #1e2430;
    --says-timeline-text: #e6e8ee;
    --says-timeline-muted: #9aa3b2;
    --says-timeline-border: rgba(255, 255, 255, 0.09);
    --says-timeline-border-hover: rgba(255, 255, 255, 0.20);
    --says-timeline-accent: #8ea7ff;
    --says-timeline-accent-contrast: #111827;
    --says-timeline-subtle-bg: #242c3a;
    --says-timeline-line: rgba(255, 255, 255, 0.14);
  }
} */

@media (max-width: 640px) {
  .says-timeline {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .says-timeline__rail {
    position: static;
  }

  .says-timeline__axis {
    display: none;
  }

  .says-timeline__months {
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .says-timeline__node {
    width: auto;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--says-timeline-border);
    border-radius: 999px;
    white-space: nowrap;
  }

  .says-timeline__node::before {
    display: none;
  }

  .says-timeline__node.is-active {
    border-color: var(--says-timeline-accent);
    background: var(--says-timeline-accent);
    color: var(--says-timeline-accent-contrast);
  }
}