@charset "UTF-8";

.vct-ranking {
  --vct-bg: #050909;
  --vct-bg-soft: #0b1010;
  --vct-card: #101515;
  --vct-card-2: #111818;
  --vct-border: rgba(255,255,255,0.12);
  --vct-border-red: rgba(220,38,38,0.45);
  --vct-red: #e53935;
  --vct-red-dark: #8f1d1d;
  --vct-text: #e8e0d2;
  --vct-muted: #9b9488;
  --vct-muted-2: #6f6a61;
  color: var(--vct-text);
}

.vct-ranking__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.vct-ranking__main,
.vct-ranking__sidebar {
  min-width: 0;
}

.vct-ranking__sidebar {
  display: grid;
  gap: 18px;
}

.vct-ranking__breadcrumb {
  color: var(--vct-muted-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 14px;
}

.vct-ranking__breadcrumb a:hover,
.vct-ranking a:hover {
  color: var(--vct-red);
}

.vct-ranking__header {
  margin-bottom: 20px;
}

.vct-ranking__header h1 {
  color: var(--vct-red);
  font-size: clamp(32px, 5vw, 48px);
  margin: 0 0 12px;
}

.vct-ranking__header p {
  color: var(--vct-muted);
  line-height: 1.75;
  max-width: 780px;
  margin: 0;
}

.vct-ranking__tabs {
  background: var(--vct-bg-soft);
  border: 1px solid var(--vct-border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 14px;
}

.vct-ranking__tabs a {
  color: var(--vct-muted);
  padding: 14px 10px;
  text-align: center;
  border-bottom: 2px solid transparent;
  font-weight: 700;
}

.vct-ranking__tabs a.is-active,
.vct-ranking__tabs a:hover {
  color: var(--vct-red);
  border-bottom-color: var(--vct-red);
}

.vct-ranking__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.vct-ranking__filters a,
.vct-ranking-tags a,
.vct-ranking-button {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(220,38,38,0.28);
  color: var(--vct-muted);
  min-height: 38px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vct-ranking__filters a.is-active,
.vct-ranking__filters a:hover,
.vct-ranking-tags a:hover {
  border-color: var(--vct-red);
  color: var(--vct-red);
  background: rgba(229,57,53,0.06);
}

.vct-ranking__list {
  background: var(--vct-bg-soft);
  border: 1px solid var(--vct-border);
}

.vct-ranking-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  background: linear-gradient(135deg, rgba(16,21,21,0.98), rgba(8,12,12,0.98));
  border-bottom: 1px solid var(--vct-border);
  padding: 20px;
}

.vct-ranking-card:hover {
  background: linear-gradient(135deg, rgba(21,28,28,0.98), rgba(10,15,15,0.98));
}

.vct-ranking-card:last-child {
  border-bottom: 0;
}

.vct-ranking-card__rank {
  color: var(--vct-red);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

.vct-ranking-card__body {
  min-width: 0;
}

.vct-ranking-card__top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.vct-ranking-card h2 {
  color: var(--vct-text);
  font-size: 22px;
  margin: 0 0 6px;
}

.vct-ranking-card__author,
.vct-ranking-card__meta,
.vct-ranking-card__desc {
  color: var(--vct-muted);
  margin: 0;
}

.vct-ranking-card__status {
  color: var(--vct-red);
  border: 1px solid var(--vct-border-red);
  padding: 5px 10px;
  white-space: nowrap;
  font-size: 13px;
}

.vct-ranking-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.vct-ranking-card__badges span {
  border: 1px solid rgba(220,38,38,0.32);
  color: #c77e75;
  background: rgba(229,57,53,0.04);
  font-size: 13px;
  padding: 4px 9px;
}

.vct-ranking-card__meta {
  font-size: 14px;
  color: var(--vct-muted-2);
}

.vct-ranking-card__desc {
  line-height: 1.7;
  margin-top: 10px;
}

.vct-ranking-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.vct-ranking-button {
  min-width: 110px;
  font-weight: 700;
}

.vct-ranking-button--red {
  color: var(--vct-red);
  border-color: var(--vct-red);
}

.vct-ranking-button:hover {
  color: var(--vct-red);
  border-color: var(--vct-red);
}

.vct-ranking__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 24px;
}

.vct-ranking__pagination a,
.vct-ranking__pagination span,
.vct-ranking__pagination em {
  border: 1px solid var(--vct-border);
  color: var(--vct-muted);
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-style: normal;
}

.vct-ranking__pagination .is-active,
.vct-ranking__pagination a:hover {
  background: var(--vct-red-dark);
  border-color: var(--vct-red);
  color: #fff;
}

.vct-ranking-side,
.vct-ranking-panel,
.vct-ranking-why {
  background: linear-gradient(135deg, rgba(16,21,21,0.98), rgba(8,12,12,0.98));
  border: 1px solid var(--vct-border);
}

.vct-ranking-side,
.vct-ranking-panel {
  padding: 20px;
}

.vct-ranking-side h2,
.vct-ranking-panel h2 {
  color: var(--vct-red);
  font-size: 22px;
  margin: 0 0 16px;
}

.vct-ranking-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vct-ranking-side-list li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 10px 0;
  align-items: center;
}

.vct-ranking-side-list li:last-child {
  border-bottom: 0;
}

.vct-ranking-side-list span,
.vct-ranking-table .is-up {
  color: var(--vct-red);
  font-weight: 700;
}

.vct-ranking-side-list b {
  color: var(--vct-muted);
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

.vct-ranking-hot-table,
.vct-ranking-table-wrap {
  overflow-x: auto;
}

.vct-ranking-hot-table table,
.vct-ranking-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 100%;
}

.vct-ranking-hot-table th,
.vct-ranking-hot-table td,
.vct-ranking-table th,
.vct-ranking-table td {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--vct-muted);
  font-size: 14px;
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

.vct-ranking-hot-table th,
.vct-ranking-table th {
  color: var(--vct-text);
  font-weight: 700;
}

.vct-ranking-tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.vct-ranking-tags a {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 13px;
}

.vct-ranking-genres {
  margin-bottom: 22px;
}

.vct-ranking-genres__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.vct-ranking-genres article {
  border: 1px solid rgba(220,38,38,0.25);
  padding: 16px;
  background: rgba(255,255,255,0.02);
}

.vct-ranking-genres h3 {
  color: var(--vct-text);
  margin: 0 0 12px;
}

.vct-ranking-genres ol,
.vct-ranking-guide {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vct-ranking-genres li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.vct-ranking-genres li span {
  color: var(--vct-red);
  font-weight: 700;
}

.vct-ranking-link {
  color: var(--vct-red);
  display: inline-flex;
  margin-top: 12px;
  font-weight: 700;
}

.vct-ranking__lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 22px;
  margin-bottom: 22px;
}

.vct-ranking-panel p,
.vct-ranking-panel li,
.vct-ranking-why p {
  color: var(--vct-muted);
  line-height: 1.7;
}

.vct-ranking-panel ul {
  margin: 12px 0;
  padding-left: 20px;
}

.vct-ranking-guide {
  counter-reset: guide;
  display: grid;
  gap: 10px;
}

.vct-ranking-guide li {
  counter-increment: guide;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
}

.vct-ranking-guide li::before {
  content: counter(guide) ".";
  color: var(--vct-red);
  font-weight: 700;
}

.vct-ranking-why {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 22px;
}

.vct-ranking-why article {
  padding: 20px;
  border-right: 1px solid rgba(220,38,38,0.32);
}

.vct-ranking-why article:last-child {
  border-right: 0;
}

.vct-ranking-why h3 {
  color: var(--vct-red);
  margin: 0 0 10px;
  font-size: 18px;
}

@media (max-width: 1024px) {
  .vct-ranking__layout,
  .vct-ranking__lower-grid {
    grid-template-columns: 1fr;
  }

  .vct-ranking__sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vct-ranking-genres__grid,
  .vct-ranking-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vct-ranking-why article:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 768px) {
  .vct-ranking__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .vct-ranking__filters a {
    white-space: nowrap;
  }

  .vct-ranking-card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .vct-ranking-card__rank {
    font-size: 32px;
  }

  .vct-ranking-card__top {
    display: grid;
  }

  .vct-ranking-card__status {
    justify-self: start;
  }

  .vct-ranking__sidebar,
  .vct-ranking-genres__grid,
  .vct-ranking-why {
    grid-template-columns: 1fr;
  }

  .vct-ranking-why article,
  .vct-ranking-why article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(220,38,38,0.32);
  }

  .vct-ranking-why article:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  .vct-ranking-card {
    grid-template-columns: 1fr;
  }

  .vct-ranking-card__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .vct-ranking-tags {
    grid-template-columns: repeat(2, 1fr);
  }
}