/* V60: brighter, coordinated accents for Recently Added and the leaderboard. */
:root {
  --recently-accent-1: #5851cf;
  --recently-accent-2: #087f68;
  --recently-accent-3: #c75a32;
  --recently-accent-4: #2378bd;
  --recently-accent-5: #9c6a0c;
  --recently-accent-6: #bd3d56;
}

.today-listings {
  border-color: #d6e1f0;
  background: linear-gradient(180deg, #f8faff 0%, #fff 34%);
  box-shadow: 0 8px 24px rgba(49, 73, 125, .07);
}
.today-list-top {
  border-bottom-color: #dce4f2;
  background: linear-gradient(105deg, #eaf3ff 0%, #f1edff 56%, #fff0eb 100%);
}
.today-heading h2 { color: #263d70; }
.today-grid { background: transparent; }
.today-card {
  position: relative;
  overflow: hidden;
  border-color: var(--today-accent-border, #d9e4ef);
  background: linear-gradient(145deg, var(--today-tint, #f7f9ff), #fff 66%);
  box-shadow: 0 4px 14px rgba(45, 62, 96, .07);
}
.today-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: var(--today-accent, #5851cf);
}
.today-card:hover {
  border-color: var(--today-accent, #5851cf);
  box-shadow: 0 9px 22px rgba(45, 62, 96, .12);
}
.today-card:nth-child(6n + 1) { --today-accent: #5851cf; --today-accent-border: #d8d5fb; --today-tint: #f1f0ff; }
.today-card:nth-child(6n + 2) { --today-accent: #087f68; --today-accent-border: #c8e8dd; --today-tint: #eaf8f2; }
.today-card:nth-child(6n + 3) { --today-accent: #c75a32; --today-accent-border: #f1d5c8; --today-tint: #fff2ec; }
.today-card:nth-child(6n + 4) { --today-accent: #2378bd; --today-accent-border: #cbe1f5; --today-tint: #edf6ff; }
.today-card:nth-child(6n + 5) { --today-accent: #9c6a0c; --today-accent-border: #efdfb6; --today-tint: #fff8e6; }
.today-card:nth-child(6n) { --today-accent: #bd3d56; --today-accent-border: #f0ced6; --today-tint: #fff0f3; }
.today-card .today-rank {
  padding: 4px 7px;
  border: 1px solid var(--today-accent-border);
  border-radius: 999px;
  color: var(--today-accent);
  background: var(--today-tint);
  font-weight: 700;
}
.today-card-metrics { border-color: color-mix(in srgb, var(--today-accent) 18%, white); }
.today-card .today-mrr {
  border-color: color-mix(in srgb, var(--today-accent) 22%, white);
  color: var(--today-accent);
  background: var(--today-tint);
}
.today-card .today-mrr > span { color: color-mix(in srgb, var(--today-accent) 72%, #56616b); }

.leaderboard .board-toolbar {
  padding: 13px 15px;
  border: 1px solid #dbe2f2;
  border-radius: 14px;
  background: linear-gradient(100deg, #eef4ff 0%, #f5f0ff 58%, #fff4ed 100%);
}
.leaderboard .board-title h2 { color: #283f73; }
.leaderboard .count-pill {
  border-color: #d5d1fb;
  color: #5149b8;
  background: #f0efff;
}
.leaderboard-cards.row-view .company-card,
.leaderboard-cards:not(.row-view) .company-card {
  border-color: var(--card-accent-border, #dfe4ee);
  background: linear-gradient(100deg, var(--card-tint, #f7f8ff) 0%, #fff 32%);
}
.leaderboard .company-card::before { width: 5px; opacity: 1; }
.leaderboard .company-card:nth-child(8n + 1) { --card-tint: #f1f0ff; --card-accent-border: #d8d5fb; }
.leaderboard .company-card:nth-child(8n + 2) { --card-tint: #eaf8f2; --card-accent-border: #c8e8dd; }
.leaderboard .company-card:nth-child(8n + 3) { --card-tint: #fff2ec; --card-accent-border: #f1d5c8; }
.leaderboard .company-card:nth-child(8n + 4) { --card-tint: #edf6ff; --card-accent-border: #cbe1f5; }
.leaderboard .company-card:nth-child(8n + 5) { --card-tint: #fff8e6; --card-accent-border: #efdfb6; }
.leaderboard .company-card:nth-child(8n + 6) { --card-tint: #fff0f3; --card-accent-border: #f0ced6; }
.leaderboard .company-card:nth-child(8n + 7) { --card-tint: #f7efff; --card-accent-border: #e1d0f3; }
.leaderboard .company-card:nth-child(8n) { --card-tint: #eff8ec; --card-accent-border: #d3e8ca; }
.leaderboard-cards.row-view .card-revenue,
.leaderboard-cards:not(.row-view) .card-revenue {
  border: 1px solid var(--card-accent-border, #dce9dd);
  color: var(--card-accent, #286448);
  background: var(--card-tint, #f2f8f1);
}
.leaderboard-cards.row-view .company-card:hover,
.leaderboard-cards:not(.row-view) .company-card:hover {
  box-shadow: 0 9px 20px rgba(45, 62, 96, .12);
}

@media (max-width: 760px) {
  .leaderboard .board-toolbar { padding: 11px; }
}