:root {
  color-scheme: dark;
}

body {
  min-height: 100vh;
  background: #101014;
  color: #f5f5f5;
}

.site-header,
.site-footer {
  background: #17171c;
  border-color: #2e2e35 !important;
}

.eyebrow {
  color: #e50914;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.filter-panel {
  padding: 1.25rem;
  background: #1a1a20;
  border: 1px solid #2e2e35;
  border-radius: 0.75rem;
}

.form-label {
  color: #c7c7cc;
  font-size: 0.875rem;
}

.form-select,
.form-control {
  color: #f5f5f5;
  background-color: #25252c;
  border-color: #454550;
}

.form-select:focus,
.form-control:focus {
  color: #f5f5f5;
  background-color: #25252c;
  border-color: #e50914;
  box-shadow: 0 0 0 0.2rem rgb(229 9 20 / 20%);
}

.ranking-card {
  height: 100%;
  overflow: hidden;
  background: #1a1a20;
  border: 1px solid #303039;
  border-radius: 0.75rem;
}

.poster-image,
.poster-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: linear-gradient(145deg, #2c2c35, #19191f);
}

.poster-placeholder {
  display: grid;
  place-items: center;
  color: #a2a2ad;
  font-size: 0.875rem;
}

.rank-number {
  min-width: 2.5rem;
  color: #e50914;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.show-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.tmdb-link,
.douban-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 999px;
}

.tmdb-icon {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0.15rem 0.4rem;
  color: #032541;
  background: linear-gradient(90deg, #90cea1, #01b4e4);
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.douban-icon {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0.15rem 0.4rem;
  color: #fff;
  background: #00b51d;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.tmdb-link:hover .tmdb-icon,
.tmdb-link:focus-visible .tmdb-icon {
  filter: brightness(1.12);
}

.douban-link:hover .douban-icon,
.douban-link:focus-visible .douban-icon {
  filter: brightness(1.12);
}

.tmdb-link:focus-visible,
.douban-link:focus-visible {
  outline: 2px solid #01b4e4;
  outline-offset: 2px;
}

.douban-link:focus-visible {
  outline-color: #00b51d;
}

.original-title,
.show-overview {
  color: #b6b6bf;
}

.show-overview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.metadata-badge {
  color: #d9d9df;
  background: #2b2b33;
  border-radius: 999px;
  font-size: 0.75rem;
}

.rank-change-up {
  color: #4ade80;
}

.rank-change-down {
  color: #fb7185;
}

.rank-change-stable,
.rank-change-new {
  color: #a2a2ad;
}

.empty-state {
  padding: 3rem 1.5rem;
  color: #b6b6bf;
  text-align: center;
  background: #1a1a20;
  border: 1px dashed #41414b;
  border-radius: 0.75rem;
}

.site-footer {
  margin-top: 3rem;
}