.swr-ranking {
  --swr-bg: var(--c-bg, #fff);
  --swr-surface: var(--c-bg-alt, #f6f7f9);
  --swr-text: var(--c-text, #16181d);
  --swr-muted: var(--c-meta, #68707c);
  --swr-line: var(--c-separator, #e4e7eb);
  --swr-toggle-bg: #17181c;
  --swr-toggle-text: #fff;
  --swr-accent: #e51f2a;
  --swr-ranking-color: var(--c-main, #b26cf5);
  --swr-card-text: #fff;
  --swr-overlay-color: rgba(0,0,0,.87);
  --swr-button-text: #fff;
  --swr-button-bg: transparent;
  --swr-button-border: rgba(255,255,255,.8);
  --swr-taxonomy-text: #fff;
  --swr-taxonomy-bg: var(--c-main, #b26cf5);
  --swr-button-radius: 4px;
  --swr-card-radius: 12px;
  --swr-dot-active: var(--swr-ranking-color);
  --swr-dot-inactive: #c7cbd2;
  --swr-dot-border: transparent;
  --swr-nav-bg: transparent;
  --swr-nav-color: var(--swr-text);
  max-width: 860px;
  margin: 28px auto;
  color: var(--swr-text);
  font-family: inherit;
}

.bunyad-skin-dark .swr-ranking,
body.bunyad-skin-dark .swr-ranking,
body.dark .swr-ranking,
body.dark-mode .swr-ranking,
body[data-theme="dark"] .swr-ranking,
.dark-mode .swr-ranking,
html[data-theme="dark"] .swr-ranking {
  --swr-bg: #1b1c1f;
  --swr-surface: #282a2f;
  --swr-text: #f5f5f6;
  --swr-muted: #aeb3bd;
  --swr-line: #3b3e45;
  --swr-toggle-bg: #fff;
  --swr-toggle-text: #17181c;
  --swr-dot-inactive: #777d88;
}

.swr-ranking header { border-left: 4px solid var(--swr-accent); padding-left: 13px; margin: 0 0 16px; }
.swr-ranking header p { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--swr-accent); margin: 0 0 3px; }
.swr-ranking header h2, .swr-ranking header h3, .swr-ranking header h4, .swr-ranking header h5, .swr-ranking header h6 { margin: 0; color: var(--swr-text); font-size: 28px; }
.swr-tabs { display: flex; gap: 6px; padding: 5px; margin-bottom: 10px; background: var(--swr-surface); border-radius: 7px; }
.swr-tabs button { appearance: none; border: 0; background: transparent; color: var(--swr-muted); border-radius: 5px; padding: 9px 16px; font: 700 13px/1 inherit; cursor: pointer; }
.swr-tabs button.is-active { background: var(--swr-toggle-bg); color: var(--swr-toggle-text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.swr-ranking ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--swr-line); }
.swr-row { display: grid; grid-template-columns: 40px 54px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--swr-line); }
.swr-position { font-size: 24px; }
.swr-row img { width: 54px; height: 78px; object-fit: cover; background: var(--swr-surface); }
.swr-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.swr-row small { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--swr-muted); }
.swr-item-title { font-size: 16px; font-weight: 700; color: var(--swr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swr-row span { font-size: 13px; color: var(--swr-muted); }
.swr-cta { align-self: flex-start; margin-top: 5px; padding: 6px 9px; border: 1px solid var(--swr-accent); border-radius: 4px; color: var(--swr-accent); font-size: 11px; font-weight: 800; line-height: 1; text-decoration: none; text-transform: uppercase; letter-spacing: .03em; }
.swr-cta:hover { background: var(--swr-accent); color: #fff; text-decoration: none; }
.swr-metrics { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.swr-metrics > b { min-width: 32px; text-align: center; font-size: 16px; line-height: 1; padding: 7px 5px; border-radius: 4px; background: var(--swr-surface); }
.swr-metrics .is-up { color: #16803d; }
.swr-metrics .is-down { color: #d93138; }
.swr-empty { color: var(--swr-muted); }

/* Modelo de carrossel: isolado do cabeçalho e das abas da lista. */
.swr-layout-carousel { max-width: none; margin: 28px 0; }
.swr-carousel { position: relative; overflow: hidden; margin: 0; }
.swr-carousel .swr-carousel-track { align-items: stretch; padding: 8px 2px 4px; }
.swr-carousel .swr-card { position: relative; isolation: isolate; display: flex; flex: 0 0 auto; width: auto; height: 330px; overflow: hidden; border-radius: var(--swr-card-radius); background: #151515; }
.swr-carousel .swr-card-media, .swr-carousel .swr-card-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.swr-carousel .swr-card-image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .3s ease; }
.swr-carousel .swr-card:hover img { transform: scale(1.04); }
.swr-card-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.03) 22%, var(--swr-overlay-color) 100%); pointer-events: none; }
.swr-card-rank { position: absolute; z-index: 2; left: 20px; bottom: 18px; width: 90px; color: var(--swr-ranking-color); font-size: 72px; font-variant-numeric: tabular-nums; letter-spacing: -.07em; line-height: .8; font-weight: 800; text-shadow: 0 1px 16px rgba(0,0,0,.34); }
.swr-carousel .swr-card-content { position: relative; z-index: 2; align-self: flex-end; width: 100%; padding: 20px 20px 20px 116px; pointer-events: auto; }
.swr-carousel .swr-card-type { display: block; margin: 0 0 5px; font-size: 10px; font-weight: 800; letter-spacing: .11em; line-height: 1; }
.swr-carousel .swr-card-type .category { display: inline-block; padding: 5px 7px; background: var(--swr-taxonomy-bg); color: var(--swr-taxonomy-text) !important; line-height: 1; }
.swr-carousel .swr-card-title { margin: 0; color: var(--swr-card-text); font-size: 22px; line-height: 1.14; }
.swr-card-cta { display: inline-block; margin-top: 10px; padding: 7px 10px; border: 1px solid var(--swr-button-border); border-radius: var(--swr-button-radius); background: var(--swr-button-bg); color: var(--swr-button-text); font-size: 11px; font-weight: 800; line-height: 1; text-decoration: none; text-transform: uppercase; letter-spacing: .03em; }
.swr-cta:hover { background: var(--swr-accent); color: #fff; text-decoration: none; }
.swr-card-cta:hover { background: var(--swr-button-bg); color: var(--swr-button-text); filter: brightness(1.15); text-decoration: none; }
.swr-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.swr-carousel-arrow { width: 28px; height: 28px; border: 1px solid var(--swr-line); border-radius: 50%; background: var(--swr-nav-bg); color: var(--swr-nav-color); font-size: 23px; line-height: 1; cursor: pointer; }
.swr-carousel-arrow:hover { border-color: var(--swr-ranking-color); color: var(--swr-nav-color); filter: brightness(1.15); }
.swr-carousel-dots { display: flex; align-items: center; gap: 6px; }
.swr-carousel-dots .swr-carousel-dot { display: block; width: 6px; height: 6px; margin: 0; padding: 0; border: 1px solid var(--swr-dot-border); border-radius: 50%; background: var(--swr-dot-inactive); opacity: 1; cursor: pointer; transition: width .2s ease, background .2s ease; }
.swr-carousel-dots .swr-carousel-dot.is-active { width: 26px; border-radius: 9px; background: var(--swr-dot-active); border-color: var(--swr-dot-active); }

@media (max-width: 700px) {
  .swr-carousel .swr-card { height: 300px; }
  .swr-carousel .swr-card-content { padding-left: 101px; }
  .swr-carousel .swr-card-title { font-size: 19px; }
  .swr-card-rank { left: 16px; font-size: 62px; }
}

@media (max-width: 520px) {
  .swr-row { grid-template-columns: 30px 46px 1fr auto; gap: 8px; }
  .swr-row img { width: 46px; height: 67px; }
  .swr-ranking header h2, .swr-ranking header h3, .swr-ranking header h4, .swr-ranking header h5, .swr-ranking header h6 { font-size: 23px; }
  .swr-tabs button { flex: 1; }
  .swr-item-title { font-size: 15px; }
  .swr-carousel .swr-card { height: 270px; }
}