/* CroupierTV Operator Calculator v2
   Presentation layer only. Operator data and upgrade formulas remain in operator.html. */

html.ctv-operator-v2-root {
  font-size: 16px !important;
}

body.ctv-operator-v2 {
  --op-bg: #070507;
  --op-surface: #10080b;
  --op-surface-2: #160a0f;
  --op-surface-3: #1c0c12;
  --op-border: rgba(255, 255, 255, .075);
  --op-border-red: rgba(238, 36, 72, .28);
  --op-red: #ee2448;
  --op-red-bright: #ff496b;
  --op-red-soft: #ff7892;
  --op-text: #f7f1f3;
  --op-copy: #c1b5ba;
  --op-muted: #a999a0;
  --op-dim: #89787f;
  --op-green: #62dba8;
  --op-blue: #65aee8;
  --op-purple: #b392e8;
  --op-orange: #e8a65c;
  --op-gold: #ffc72c;
  --op-gold-soft: #ffe27a;
  --op-button-border: rgba(157, 43, 67, .76);
  --op-button-border-hover: rgba(196, 61, 88, .82);
  --op-button-bg: linear-gradient(135deg, #781229, #420712);
  --op-button-bg-hover: linear-gradient(135deg, #8e1731, #500918);
  --op-radius: 15px;
  --op-shadow: 0 24px 70px rgba(0, 0, 0, .32);
  min-width: 320px !important;
  overflow-x: hidden !important;
  color: var(--op-text) !important;
  background: var(--op-bg) !important;
  font-family: Inter, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body.ctv-operator-v2::before {
  opacity: .18 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px) !important;
  background-size: 70px 70px !important;
}

body.ctv-operator-v2,
body.ctv-operator-v2 button,
body.ctv-operator-v2 input,
body.ctv-operator-v2 select {
  font-family: Inter, Arial, sans-serif !important;
}

body.ctv-operator-v2 .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.ctv-operator-v2 :is(button, input, select, summary, a):focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

/* Shared title banner: same compact treatment as weapons.html. */
html body.ctv-page-operator.ctv-subpage-active .ctv-subpage-showcase,
html body.ctv-page-operator.ctv-subpage-active .ctv-subpage-showcase-inner {
  height: 240px !important;
  min-height: 240px !important;
}

html body.ctv-page-operator.ctv-subpage-active .ctv-subpage-showcase {
  border-bottom: 1px solid rgba(255, 61, 98, .13) !important;
  background: var(--op-bg) !important;
}

html body.ctv-page-operator.ctv-subpage-active .ctv-subpage-showcase-inner {
  width: min(1320px, calc(100% - 40px)) !important;
  padding: 18px 0 20px !important;
}

html body.ctv-page-operator .ctv-subpage-showcase-bg {
  background:
    linear-gradient(90deg, #070507 0%, rgba(7, 5, 7, .94) 28%, rgba(7, 5, 7, .43) 67%, rgba(7, 5, 7, .84) 100%),
    linear-gradient(0deg, #070507 0%, transparent 58%),
    url("https://static-eu.prod-my.games/chronos-public-eu-tacticool-prod/site/news_content/85915d5b-1868-45b7-bcbd-bf3946ac93e3.jpg") center 35% / cover no-repeat !important;
  filter: saturate(.7) contrast(1.08) !important;
}

html body.ctv-page-operator .ctv-subpage-showcase-bg::after {
  display: block !important;
  background:
    linear-gradient(180deg, transparent 62%, #070507 100%),
    radial-gradient(circle at 74% 42%, transparent, rgba(7, 5, 7, .32) 58%, #070507 92%) !important;
}

html body.ctv-page-operator .ctv-subpage-title {
  margin-bottom: 10px !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: clamp(3rem, 4.2vw, 4.4rem) !important;
  font-weight: 900 !important;
  line-height: .84 !important;
  letter-spacing: -.035em !important;
}

html body.ctv-page-operator .ctv-subpage-description {
  max-width: 720px !important;
  color: var(--op-copy) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

html body.ctv-page-operator .ctv-subpage-actions {
  margin-top: 14px !important;
}

html body.ctv-page-operator.operator-redesign.ctv-subpage-active .ctv-subpage-showcase .ctv-subpage-actions > a.ctv-subpage-primary,
html body.ctv-page-operator.operator-redesign.ctv-subpage-active .ctv-subpage-showcase .ctv-subpage-actions > a.ctv-subpage-primary:link,
html body.ctv-page-operator.operator-redesign.ctv-subpage-active .ctv-subpage-showcase .ctv-subpage-actions > a.ctv-subpage-primary:visited {
  border: 1px solid var(--op-button-border) !important;
  border-radius: 6px !important;
  color: #fff !important;
  background: var(--op-button-bg) !important;
  box-shadow:
    0 8px 18px rgba(35, 0, 10, .3),
    inset 0 1px rgba(255, 255, 255, .08) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease !important;
}

html body.ctv-page-operator.operator-redesign.ctv-subpage-active .ctv-subpage-showcase .ctv-subpage-actions > a.ctv-subpage-primary:hover,
html body.ctv-page-operator.operator-redesign.ctv-subpage-active .ctv-subpage-showcase .ctv-subpage-actions > a.ctv-subpage-primary:focus-visible {
  border-color: var(--op-button-border-hover) !important;
  background: var(--op-button-bg-hover) !important;
  box-shadow:
    0 11px 24px rgba(35, 0, 10, .38),
    inset 0 1px rgba(255, 255, 255, .1) !important;
  transform: translateY(-1px) !important;
}

html body.ctv-page-operator.operator-redesign.ctv-subpage-active .ctv-subpage-showcase .ctv-subpage-actions > a.ctv-subpage-primary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .9) !important;
  outline-offset: 2px !important;
}

/* Page frame */
html body.ctv-operator-v2.ctv-subpage-active > main.operator-v2-page {
  position: relative !important;
  z-index: 2 !important;
  width: min(1320px, calc(100% - 40px)) !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 48px 0 120px !important;
  overflow: visible !important;
  background: transparent !important;
}

html body.ctv-operator-v2.ctv-subpage-active > main.operator-v2-page::before,
html body.ctv-operator-v2.ctv-subpage-active > main.operator-v2-page::after {
  display: none !important;
}

body.ctv-operator-v2 :is(#operator-planner, #cost-timeline, #overview-lbl) {
  scroll-margin-top: 96px;
}

/* Upgrade control deck */
html body.ctv-operator-v2 .operator-control-deck,
html body.ctv-operator-v2 .operator-results-shell,
html body.ctv-operator-v2 .operator-timeline {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--op-border) !important;
  border-radius: var(--op-radius) !important;
  background:
    radial-gradient(circle at 8% 0, rgba(155, 17, 51, .13), transparent 28rem),
    linear-gradient(155deg, rgba(25, 10, 16, .98), rgba(8, 5, 7, .995)) !important;
  box-shadow: var(--op-shadow) !important;
}

html body.ctv-operator-v2 .operator-control-deck::before,
html body.ctv-operator-v2 .operator-results-shell::before,
html body.ctv-operator-v2 .operator-timeline::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--op-red), rgba(238, 36, 72, .12) 44%, transparent);
}

html body.ctv-operator-v2 .operator-control-deck {
  padding: 24px !important;
}

html body.ctv-operator-v2 .operator-deck-heading,
html body.ctv-operator-v2 .operator-results-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

html body.ctv-operator-v2 .operator-deck-heading {
  margin-bottom: 20px;
}

html body.ctv-operator-v2 .operator-section-kicker,
html body.ctv-operator-v2 .operator-field-label,
html body.ctv-operator-v2 .r-lbl {
  display: block;
  color: var(--op-red-soft) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .66rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

html body.ctv-operator-v2 .operator-deck-heading h2,
html body.ctv-operator-v2 .operator-results-heading h2 {
  margin: 4px 0 0 !important;
  color: #fff !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: clamp(2rem, 3vw, 2.8rem) !important;
  font-weight: 900 !important;
  line-height: .95 !important;
  letter-spacing: -.02em !important;
  text-transform: uppercase !important;
}

html body.ctv-operator-v2 .operator-deck-heading p,
html body.ctv-operator-v2 .operator-results-heading p {
  max-width: 640px;
  margin: 7px 0 0 !important;
  color: var(--op-copy) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

html body.ctv-operator-v2 .operator-deck-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  min-width: 350px;
  overflow: hidden;
  border: 1px solid var(--op-border);
  border-radius: 10px;
  background: rgba(0, 0, 0, .2);
}

html body.ctv-operator-v2 .operator-deck-metric {
  display: grid;
  gap: 5px;
  min-height: 62px;
  align-content: center;
  padding: 10px 14px;
  border-right: 1px solid var(--op-border);
}

html body.ctv-operator-v2 .operator-deck-metric:last-child {
  border-right: 0;
}

html body.ctv-operator-v2 .operator-deck-metric b {
  overflow: hidden;
  color: #fff !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

html body.ctv-operator-v2 .operator-deck-metric span {
  color: var(--op-muted) !important;
  font-size: .58rem !important;
  font-weight: 750 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}

/* Rarity selector */
html body.ctv-operator-v2 .rarity-nav {
  display: flex !important;
  gap: 7px !important;
  margin: 0 -4px 16px !important;
  padding: 3px 4px 6px !important;
  overflow-x: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-color: rgba(238, 36, 72, .5) transparent;
  scrollbar-width: thin;
}

html body.ctv-operator-v2 .rnav-btn {
  --rarity: #fff;
  display: inline-flex !important;
  min-width: 178px;
  min-height: 46px !important;
  flex: 1 0 178px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 8px !important;
  color: #a99aa0 !important;
  background: rgba(255, 255, 255, .018) !important;
  box-shadow: none !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .67rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

html body.ctv-operator-v2 .rnav-btn[data-r="EPIC"] { --rarity: var(--op-orange); }
html body.ctv-operator-v2 .rnav-btn[data-r="RARE"] { --rarity: var(--op-purple); }
html body.ctv-operator-v2 .rnav-btn[data-r="UNCOMMON"] { --rarity: var(--op-blue); }
html body.ctv-operator-v2 .rnav-btn[data-r="COMMON"] { --rarity: #ded7da; }

html body.ctv-operator-v2 .rnav-btn:hover {
  border-color: color-mix(in srgb, var(--rarity) 45%, transparent) !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--rarity) 7%, transparent) !important;
  transform: translateY(-1px) !important;
}

html body.ctv-operator-v2 .rnav-btn.active {
  border-color: var(--op-button-border) !important;
  color: #fff !important;
  background: var(--op-button-bg) !important;
  box-shadow:
    0 8px 18px rgba(35, 0, 10, .3),
    inset 0 -2px var(--rarity),
    inset 0 1px rgba(255, 255, 255, .08) !important;
}

html body.ctv-operator-v2 .rnav-btn.active:hover,
html body.ctv-operator-v2 .rnav-btn.active:focus-visible {
  border-color: var(--op-button-border-hover) !important;
  background: var(--op-button-bg-hover) !important;
  box-shadow:
    0 11px 24px rgba(35, 0, 10, .38),
    inset 0 -2px var(--rarity),
    inset 0 1px rgba(255, 255, 255, .1) !important;
}

html body.ctv-operator-v2 .rnav-count {
  display: grid !important;
  min-width: 58px;
  min-height: 22px;
  place-items: center;
  margin: 0 !important;
  padding: 0 6px;
  border-radius: 5px;
  color: #817279 !important;
  background: rgba(255, 255, 255, .035);
  font-size: .55rem !important;
  font-weight: 750 !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
}

html body.ctv-operator-v2 .rnav-btn.active .rnav-count {
  color: #fff !important;
  background: rgba(255, 255, 255, .055) !important;
}

/* Planner workspace */
html body.ctv-operator-v2 .command-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr) !important;
  gap: 14px !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.ctv-operator-v2 .command-shell > .card {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 13px !important;
  background: linear-gradient(155deg, #150a0e, #090607 74%) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2) !important;
}

html body.ctv-operator-v2 .command-shell > .card::before {
  display: none !important;
}

html body.ctv-operator-v2 .card-hdr {
  display: flex !important;
  min-height: 58px !important;
  align-items: center;
  gap: 11px !important;
  padding: 13px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--op-border) !important;
  background: rgba(255, 255, 255, .012) !important;
}

html body.ctv-operator-v2 .card-tag {
  display: inline-flex !important;
  min-height: 24px !important;
  align-items: center;
  padding: 0 8px !important;
  border: 1px solid var(--op-border-red) !important;
  border-radius: 999px !important;
  color: var(--op-red-soft) !important;
  background: rgba(238, 36, 72, .08) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .54rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

html body.ctv-operator-v2 .card-title {
  color: #fff !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase;
}

html body.ctv-operator-v2 .range-body,
html body.ctv-operator-v2 .res-body {
  padding: 18px !important;
}

html body.ctv-operator-v2 .r-row {
  display: grid !important;
  grid-template-columns: 1fr 24px 1fr !important;
  gap: 10px !important;
  align-items: end;
}

html body.ctv-operator-v2 .r-lbl {
  margin: 0 0 7px !important;
}

html body.ctv-operator-v2 .r-arr {
  align-self: end;
  display: grid !important;
  height: 46px;
  place-items: center;
  color: var(--op-red-bright) !important;
  font-size: 1.1rem !important;
}

html body.ctv-operator-v2 .r-sel {
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 34px 0 12px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 8px !important;
  color: #f3ecee !important;
  background: #0a0608 !important;
  box-shadow: none !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html body.ctv-operator-v2 .r-sel:focus {
  border-color: var(--op-red-bright) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(238, 36, 72, .1) !important;
}

html body.ctv-operator-v2 :is(.preset-all, .preset-btn, .market-btn) {
  border: 1px solid rgba(157, 43, 67, .36) !important;
  border-radius: 8px !important;
  color: #e8dfe2 !important;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025) !important;
  font-family: Inter, Arial, sans-serif !important;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

html body.ctv-operator-v2 :is(.preset-all, .preset-btn, .market-btn):hover {
  border-color: rgba(196, 61, 88, .64) !important;
  color: #fff !important;
  background: rgba(116, 17, 39, .18) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
  transform: translateY(-1px) !important;
}

html body.ctv-operator-v2 :is(.preset-all, .preset-btn).active {
  border-color: rgba(163, 35, 63, .42) !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(112, 15, 37, .22), rgba(59, 6, 16, .1)) !important;
  box-shadow:
    inset 0 -2px #bd2949,
    inset 0 1px rgba(255, 255, 255, .045) !important;
}

html body.ctv-operator-v2 .rank-max {
  display: flex !important;
  min-height: 54px !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px !important;
  padding: 8px 12px !important;
  border-color: var(--op-button-border) !important;
  border-radius: 6px !important;
  background: var(--op-button-bg) !important;
  box-shadow:
    0 8px 18px rgba(35, 0, 10, .3),
    inset 0 1px rgba(255, 255, 255, .08) !important;
}

html body.ctv-operator-v2 .rank-max:hover {
  border-color: var(--op-button-border-hover) !important;
  background: var(--op-button-bg-hover) !important;
  box-shadow:
    0 11px 24px rgba(35, 0, 10, .38),
    inset 0 1px rgba(255, 255, 255, .1) !important;
}

html body.ctv-operator-v2 .rank-max.active {
  border-color: var(--op-button-border) !important;
  background: var(--op-button-bg) !important;
  box-shadow:
    0 8px 18px rgba(35, 0, 10, .3),
    inset 0 1px rgba(255, 255, 255, .08) !important;
}

html body.ctv-operator-v2 .rank-max-stars {
  display: flex !important;
  gap: 2px !important;
}

html body.ctv-operator-v2 .rank-max-stars img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain;
  filter:
    brightness(0)
    saturate(100%)
    invert(82%)
    sepia(100%)
    saturate(1291%)
    hue-rotate(343deg)
    brightness(104%)
    contrast(104%)
    drop-shadow(0 0 5px rgba(255, 199, 44, .28)) !important;
}

html body.ctv-operator-v2 .rank-max-copy {
  display: grid !important;
  gap: 4px;
  text-align: left;
}

html body.ctv-operator-v2 .rank-max-copy b {
  color: #fff !important;
  font-size: .65rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
}

html body.ctv-operator-v2 .rank-max-copy small {
  color: var(--op-gold-soft) !important;
  font-size: .54rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

html body.ctv-operator-v2 .rank-upgrade-presets {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin-top: 9px !important;
}

html body.ctv-operator-v2 .rank-upgrade-step {
  display: grid !important;
  grid-template-rows: auto auto auto;
  min-width: 0;
  min-height: 76px !important;
  align-content: center !important;
  justify-items: center;
  gap: 6px !important;
  padding: 8px 5px !important;
}

html body.ctv-operator-v2 .rank-upgrade-step:last-child {
  grid-column: 1 / -1;
}

html body.ctv-operator-v2 .rank-route-label {
  display: flex !important;
  align-items: center;
  gap: 4px !important;
}

html body.ctv-operator-v2 .rank-route-label b {
  color: #ded5d8 !important;
  font-size: .5rem !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
  white-space: nowrap;
}

html body.ctv-operator-v2 .rank-route-label i,
html body.ctv-operator-v2 .route-arrow {
  color: #b8a15a !important;
  font-style: normal;
  font-size: .54rem !important;
}

html body.ctv-operator-v2 .rank-route-stars {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 3px !important;
  min-width: 0;
}

html body.ctv-operator-v2 .route-stars {
  display: flex !important;
  gap: 1px !important;
}

html body.ctv-operator-v2 .route-stars img {
  width: 12px !important;
  height: 12px !important;
  object-fit: contain;
}

html body.ctv-operator-v2 .route-stars img[alt="filled star"] {
  opacity: 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(82%)
    sepia(100%)
    saturate(1291%)
    hue-rotate(343deg)
    brightness(104%)
    contrast(104%)
    drop-shadow(0 0 4px rgba(255, 199, 44, .22)) !important;
}

html body.ctv-operator-v2 .route-stars img[alt="empty star"] {
  opacity: .42;
  filter: grayscale(1) brightness(.84) !important;
}

html body.ctv-operator-v2 .rank-upgrade-step small {
  color: #82757a !important;
  font-size: .53rem !important;
  font-weight: 700 !important;
  letter-spacing: .055em !important;
}

/* Cost summary */
html body.ctv-operator-v2 .res-body {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 9px !important;
}

html body.ctv-operator-v2 .res-icon-block {
  display: flex !important;
  min-height: 292px !important;
  flex-direction: column;
  padding: 16px !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, .19) !important;
}

html body.ctv-operator-v2 .res-inline {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  color: var(--op-muted) !important;
  font-size: .57rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

html body.ctv-operator-v2 .res-icon {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  color: #fff !important;
  background: rgba(255, 255, 255, .035);
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900;
}

html body.ctv-operator-v2 .value-line {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between;
  gap: 10px;
}

html body.ctv-operator-v2 .res-num {
  margin-top: 13px !important;
  color: #fff !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: clamp(1.7rem, 3vw, 2.45rem) !important;
  font-weight: 900 !important;
  line-height: .92 !important;
  letter-spacing: -.01em !important;
}

html body.ctv-operator-v2 .result-shards > div:first-child > .res-num {
  color: var(--op-blue) !important;
}

html body.ctv-operator-v2 .gold-conversion {
  color: var(--op-orange) !important;
}

html body.ctv-operator-v2 .res-lbl {
  margin-top: 6px !important;
  color: #80747a !important;
  font-size: .51rem !important;
  font-weight: 750 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}

html body.ctv-operator-v2 .res-sub-euro,
html body.ctv-operator-v2 .res-sub-note {
  color: #b7abb0 !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .65rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

html body.ctv-operator-v2 .or-divider {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  margin: 15px 0 12px !important;
  color: var(--op-red-soft) !important;
}

html body.ctv-operator-v2 .or-divider::before,
html body.ctv-operator-v2 .or-divider::after {
  height: 1px !important;
  flex: 1;
  background: rgba(255, 255, 255, .075) !important;
}

html body.ctv-operator-v2 .or-divider span {
  padding: 3px 7px !important;
  border: 1px solid var(--op-border-red) !important;
  border-radius: 5px;
  color: var(--op-red-soft) !important;
  background: rgba(238, 36, 72, .06) !important;
  font-size: .48rem !important;
}

html body.ctv-operator-v2 .shard-conversion .res-sub-note {
  margin-top: 8px !important;
}

html body.ctv-operator-v2 .market-btn {
  display: inline-flex !important;
  width: 100% !important;
  min-height: 42px !important;
  align-items: center;
  justify-content: center;
  margin-top: auto !important;
  padding: 8px 11px !important;
  border-color: var(--op-button-border) !important;
  border-radius: 6px !important;
  color: #fff !important;
  background: var(--op-button-bg) !important;
  box-shadow:
    0 8px 18px rgba(35, 0, 10, .3),
    inset 0 1px rgba(255, 255, 255, .08) !important;
  font-size: .59rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: .065em !important;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  filter: none !important;
}

html body.ctv-operator-v2 .market-btn:hover {
  border-color: var(--op-button-border-hover) !important;
  background: var(--op-button-bg-hover) !important;
  box-shadow:
    0 11px 24px rgba(35, 0, 10, .38),
    inset 0 1px rgba(255, 255, 255, .1) !important;
  filter: none !important;
}

html body.ctv-operator-v2 .shard-conversion {
  display: flex;
  flex: 1;
  flex-direction: column;
}

html body.ctv-operator-v2 .shard-conversion .market-btn {
  margin-top: 12px !important;
}

/* Timeline */
html body.ctv-operator-v2 .operator-timeline {
  margin-top: 18px !important;
}

html body.ctv-operator-v2 details > summary {
  cursor: pointer;
  list-style: none;
}

html body.ctv-operator-v2 details > summary::-webkit-details-marker {
  display: none;
}

html body.ctv-operator-v2 .operator-timeline > .tbl-toggle {
  display: flex !important;
  width: 100% !important;
  min-height: 78px !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .012) !important;
  box-shadow: none !important;
  text-transform: none !important;
}

html body.ctv-operator-v2 .tbl-toggle > span:first-child {
  display: grid;
  gap: 6px;
}

html body.ctv-operator-v2 .tbl-toggle strong {
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

html body.ctv-operator-v2 .tbl-arrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--op-muted);
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body.ctv-operator-v2 .tbl-arrow b {
  color: var(--op-red-bright);
  font-size: 1rem;
}

html body.ctv-operator-v2 .operator-timeline:not([open]) .tbl-body-wrap {
  display: none !important;
}

html body.ctv-operator-v2 .operator-timeline[open] .tbl-body-wrap {
  display: block !important;
}

html body.ctv-operator-v2 .tbl-body-wrap {
  max-height: 520px;
  overflow: auto !important;
  border: 0 !important;
  border-top: 1px solid var(--op-border) !important;
  border-radius: 0 !important;
  background: #090608 !important;
}

html body.ctv-operator-v2 .lvl-tbl {
  width: 100% !important;
  min-width: 720px;
  border-collapse: collapse !important;
  color: #ddd3d7 !important;
  background: transparent !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .69rem !important;
}

html body.ctv-operator-v2 .lvl-tbl thead {
  position: sticky;
  z-index: 2;
  top: 0;
}

html body.ctv-operator-v2 .lvl-tbl th,
html body.ctv-operator-v2 .lvl-tbl td {
  height: 43px;
  padding: 8px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .055) !important;
  color: #cfc5c9 !important;
  background: transparent !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .69rem !important;
  font-weight: 650 !important;
}

html body.ctv-operator-v2 .lvl-tbl th {
  color: #95898e !important;
  background: #0f080b !important;
  font-size: .54rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

html body.ctv-operator-v2 .lvl-tbl tr.in-range td {
  background: rgba(238, 36, 72, .06) !important;
}

html body.ctv-operator-v2 .lvl-tbl tr.in-range td:first-child {
  border-left: 2px solid rgba(255, 73, 107, .58) !important;
  color: #fff !important;
}

html body.ctv-operator-v2 .lvl-tbl tr.star-break td {
  border-top: 1px solid rgba(255, 73, 107, .28) !important;
}

html body.ctv-operator-v2 .lvl-tbl .sb {
  color: var(--op-gold-soft) !important;
}

/* Operator database */
html body.ctv-operator-v2 .operator-results-shell {
  margin-top: 18px !important;
  padding: 0 20px 22px !important;
}

html body.ctv-operator-v2 .operator-results-heading {
  min-height: 84px;
  align-items: center;
  margin: 0;
  padding: 16px 2px;
  border-bottom: 1px solid var(--op-border);
}

html body.ctv-operator-v2 .operator-visible-status {
  display: grid;
  min-width: 90px;
  min-height: 62px;
  place-content: center;
  padding: 8px 14px;
  border: 1px solid var(--op-border);
  border-radius: 10px;
  background: rgba(0, 0, 0, .19);
  text-align: center;
}

html body.ctv-operator-v2 .operator-visible-status b {
  color: #fff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: .9;
}

html body.ctv-operator-v2 .operator-visible-status span {
  margin-top: 6px;
  color: var(--op-muted);
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

html body.ctv-operator-v2 .operator-toolbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(155px, .27fr) minmax(175px, .3fr);
  gap: 9px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--op-border);
  border-radius: 11px;
  background: rgba(0, 0, 0, .18);
  margin-top: 18px;
}

html body.ctv-operator-v2 .operator-search-wrap,
html body.ctv-operator-v2 .operator-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

html body.ctv-operator-v2 .operator-search-wrap {
  position: relative;
}

html body.ctv-operator-v2 .operator-search-wrap::after {
  content: "SEARCH";
  position: absolute;
  right: 14px;
  bottom: 15px;
  color: var(--op-dim);
  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .12em;
  pointer-events: none;
}

html body.ctv-operator-v2 .operator-toolbar :is(input, select) {
  width: 100% !important;
  min-width: 0;
  height: 43px !important;
  min-height: 43px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 8px !important;
  color: #e9e0e3 !important;
  background: #0a0608 !important;
  box-shadow: none !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

html body.ctv-operator-v2 .operator-toolbar input {
  padding: 0 80px 0 12px !important;
}

html body.ctv-operator-v2 .operator-toolbar select {
  padding: 0 34px 0 11px !important;
}

html body.ctv-operator-v2 .operator-toolbar input::placeholder {
  color: #74666d;
}

html body.ctv-operator-v2 .operator-toolbar :is(input, select):focus {
  border-color: var(--op-red-bright) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(238, 36, 72, .1) !important;
}

html body.ctv-operator-v2 .operator-results-meta {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 3px;
  color: var(--op-dim);
  font-size: .6rem;
  font-weight: 650;
  letter-spacing: .025em;
}

html body.ctv-operator-v2 #operator-results-status {
  color: #b6aaaf;
}

html body.ctv-operator-v2 .op-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(315px, 1fr)) !important;
  gap: 13px !important;
}

html body.ctv-operator-v2 .op-card,
html body.ctv-operator-v2 .op-card[data-r] {
  --rarity: #ded7da !important;
  --rarity-glow: rgba(255, 255, 255, .06) !important;
  position: relative;
  min-width: 0;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 100% 0, var(--rarity-glow), transparent 44%),
    linear-gradient(155deg, #150a0e, #090607) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24) !important;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

html body.ctv-operator-v2 .op-card[data-r="EPIC"] {
  --rarity: var(--op-orange) !important;
  --rarity-glow: rgba(232, 166, 92, .09) !important;
}

html body.ctv-operator-v2 .op-card[data-r="RARE"] {
  --rarity: var(--op-purple) !important;
  --rarity-glow: rgba(179, 146, 232, .09) !important;
}

html body.ctv-operator-v2 .op-card[data-r="UNCOMMON"] {
  --rarity: var(--op-blue) !important;
  --rarity-glow: rgba(101, 174, 232, .09) !important;
}

html body.ctv-operator-v2 .op-card:hover {
  border-color: color-mix(in srgb, var(--rarity) 52%, var(--op-border)) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .29) !important;
  transform: translateY(-2px);
}

html body.ctv-operator-v2 .op-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  display: block !important;
  width: 2px;
  background: var(--rarity);
  opacity: .82;
  pointer-events: none;
}

html body.ctv-operator-v2 .op-card::after {
  display: none !important;
  content: none !important;
}

html body.ctv-operator-v2 .op-card-hdr,
html body.ctv-operator-v2 .op-card[data-r] .op-card-hdr {
  display: flex !important;
  min-height: 92px !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 13px !important;
  padding: 17px 17px 13px 19px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--op-border) !important;
  background: rgba(255, 255, 255, .012) !important;
}

html body.ctv-operator-v2 .op-card-name {
  color: #fff !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: 1.42rem !important;
  font-weight: 900 !important;
  line-height: .95 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
  text-transform: uppercase;
}

html body.ctv-operator-v2 .op-card-class {
  margin-top: 6px !important;
  color: var(--op-muted) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .59rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

html body.ctv-operator-v2 .op-card-rarity {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--rarity) 45%, transparent);
  border-radius: 5px;
  color: var(--rarity);
  background: color-mix(in srgb, var(--rarity) 7%, transparent);
  font-size: .52rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .07em;
}

html body.ctv-operator-v2 .op-card-body {
  position: relative !important;
  z-index: 1;
  padding: 0 !important;
}

html body.ctv-operator-v2 .op-card-hp {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "label count"
    "value count";
  align-items: center !important;
  gap: 5px 12px;
  min-height: 74px;
  margin: 13px 15px 4px 17px !important;
  padding: 13px 14px !important;
  border: 1px solid color-mix(in srgb, var(--rarity) 22%, transparent) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity) 10%, transparent), rgba(255, 255, 255, .014)) !important;
}

html body.ctv-operator-v2 .op-hp-lbl {
  grid-area: label;
  color: #877a80 !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .51rem !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
}

html body.ctv-operator-v2 .op-hp-val {
  grid-area: value;
  color: var(--rarity) !important;
  font-family: "Barlow Condensed", Impact, sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: .9 !important;
}

html body.ctv-operator-v2 .op-ability-count {
  grid-area: count;
  justify-self: end;
  padding: 5px 7px;
  border: 1px solid var(--op-border);
  border-radius: 5px;
  color: var(--op-muted);
  background: rgba(255, 255, 255, .025);
  font-size: .52rem;
  font-weight: 750;
  letter-spacing: .04em;
  white-space: nowrap;
}

html body.ctv-operator-v2 .op-card-abilities {
  padding: 7px 16px 14px 18px;
}

html body.ctv-operator-v2 .op-card-ab {
  position: relative;
  margin: 0 !important;
  padding: 9px 0 9px 15px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
  color: #d8ced2 !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: .7rem !important;
  font-weight: 550 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

html body.ctv-operator-v2 .op-card-ab:last-child {
  border-bottom: 0 !important;
}

html body.ctv-operator-v2 .op-ab-ico {
  position: absolute !important;
  top: 8px !important;
  left: 0 !important;
  color: var(--rarity) !important;
  font-size: .9rem !important;
  text-shadow: none !important;
}

html body.ctv-operator-v2 .operator-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: var(--op-muted);
  background: rgba(255, 255, 255, .012);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 1120px) {
  html body.ctv-operator-v2.ctv-subpage-active > main.operator-v2-page {
    width: min(1320px, calc(100% - 32px)) !important;
  }

  html body.ctv-operator-v2 .operator-deck-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  html body.ctv-operator-v2 .operator-deck-metrics {
    width: 100%;
  }

  html body.ctv-operator-v2 .command-shell {
    grid-template-columns: 1fr !important;
  }

  html body.ctv-operator-v2 .res-icon-block {
    min-height: 245px !important;
  }

  html body.ctv-operator-v2 .operator-toolbar {
    grid-template-columns: minmax(250px, 1fr) 170px 185px;
  }
}

@media (max-width: 760px) {
  html body.ctv-page-operator.ctv-subpage-active .ctv-subpage-showcase,
  html body.ctv-page-operator.ctv-subpage-active .ctv-subpage-showcase-inner {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.ctv-page-operator.ctv-subpage-active .ctv-subpage-showcase-inner {
    width: min(100% - 20px, 1320px) !important;
    padding: 24px 0 27px !important;
  }

  html body.ctv-page-operator .ctv-subpage-title {
    font-size: clamp(2.7rem, 13vw, 3.55rem) !important;
  }

  html body.ctv-operator-v2.ctv-subpage-active > main.operator-v2-page {
    width: min(100% - 20px, 1320px) !important;
    padding: 18px 0 110px !important;
  }

  html body.ctv-operator-v2 .operator-control-deck {
    padding: 16px !important;
  }

  html body.ctv-operator-v2 .operator-results-shell {
    padding: 0 12px 14px !important;
    border-radius: 12px !important;
  }

  html body.ctv-operator-v2 .operator-deck-metrics {
    min-width: 0;
  }

  html body.ctv-operator-v2 .operator-deck-metric {
    min-width: 0;
    padding: 9px;
  }

  html body.ctv-operator-v2 .operator-deck-metric b {
    font-size: 1.25rem !important;
  }

  html body.ctv-operator-v2 .rarity-nav {
    margin-right: -5px !important;
    margin-left: -5px !important;
  }

  html body.ctv-operator-v2 .rnav-btn {
    min-width: 164px;
    flex-basis: 164px;
  }

  html body.ctv-operator-v2 .rank-upgrade-presets {
    display: flex !important;
    margin-right: -2px !important;
    padding: 0 2px 6px !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  html body.ctv-operator-v2 .rank-upgrade-step {
    min-width: 176px;
    flex: 0 0 176px;
    scroll-snap-align: start;
  }

  html body.ctv-operator-v2 .rank-route-stars {
    width: 100%;
  }

  html body.ctv-operator-v2 .route-stars img {
    width: 12px !important;
    height: 12px !important;
  }

  html body.ctv-operator-v2 .res-body {
    grid-template-columns: 1fr 1fr !important;
  }

  html body.ctv-operator-v2 .res-icon-block {
    min-height: 270px !important;
  }

  html body.ctv-operator-v2 .operator-results-heading {
    align-items: flex-start;
    min-height: 72px;
    padding: 14px 2px;
  }

  html body.ctv-operator-v2 .operator-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  html body.ctv-operator-v2 .operator-search-wrap {
    grid-column: 1 / -1;
  }

  html body.ctv-operator-v2 .operator-results-meta > span:last-child {
    display: none;
  }

  html body.ctv-operator-v2 .op-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  html body.ctv-operator-v2 .rank-upgrade-presets {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none;
  }

  html body.ctv-operator-v2 .rank-upgrade-step,
  html body.ctv-operator-v2 .rank-upgrade-step:last-child {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: none;
    grid-column: auto;
  }

  html body.ctv-operator-v2 .route-stars img {
    width: 14px !important;
    height: 14px !important;
  }

  html body.ctv-operator-v2 .operator-deck-metrics {
    grid-template-columns: 1fr 1fr;
  }

  html body.ctv-operator-v2 .operator-deck-metric:nth-child(2) {
    border-right: 0;
  }

  html body.ctv-operator-v2 .operator-deck-metric:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid var(--op-border);
  }

  html body.ctv-operator-v2 .r-row {
    grid-template-columns: 1fr !important;
  }

  html body.ctv-operator-v2 .r-arr {
    display: none !important;
  }

  html body.ctv-operator-v2 .res-body {
    grid-template-columns: 1fr !important;
  }

  html body.ctv-operator-v2 .res-icon-block {
    min-height: 230px !important;
  }

  html body.ctv-operator-v2 .operator-results-heading p {
    display: none;
  }

  html body.ctv-operator-v2 .operator-visible-status {
    min-width: 72px;
  }

  html body.ctv-operator-v2 .operator-toolbar {
    grid-template-columns: 1fr;
  }

  html body.ctv-operator-v2 .operator-search-wrap {
    grid-column: auto;
  }

  html body.ctv-operator-v2 .tbl-arrow {
    font-size: 0;
  }

  html body.ctv-operator-v2 .tbl-arrow b {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  body.ctv-operator-v2 *,
  body.ctv-operator-v2 *::before,
  body.ctv-operator-v2 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/*
  Community button lock
  ---------------------
  ctv-subpage-theme.css groups several controls in a high-specificity
  :is(...)-selector. Keep these page-scoped selectors stronger so the shared
  vivid-red primary gradient cannot override Operator's dark Community CTA.
*/
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active .rnav-btn.active,
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active .preset-all.rank-max,
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active .preset-all.rank-max.active,
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active a.market-link.market-btn,
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active a.market-link.market-btn:link,
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active a.market-link.market-btn:visited {
  border-color: rgba(157, 43, 67, .76) !important;
  border-radius: 6px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #781229, #420712) !important;
  box-shadow:
    0 8px 18px rgba(35, 0, 10, .3),
    inset 0 1px rgba(255, 255, 255, .08) !important;
  filter: none !important;
}

html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active .rnav-btn.active {
  box-shadow:
    0 8px 18px rgba(35, 0, 10, .3),
    inset 0 -2px var(--rarity),
    inset 0 1px rgba(255, 255, 255, .08) !important;
}

html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active .rnav-btn.active .rnav-count {
  color: #fff !important;
  background: rgba(255, 255, 255, .055) !important;
}

html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active .rnav-btn.active:hover,
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active .rnav-btn.active:focus-visible,
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active .preset-all.rank-max:hover,
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active .preset-all.rank-max:focus-visible,
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active a.market-link.market-btn:hover,
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active a.market-link.market-btn:focus-visible {
  border-color: rgba(196, 61, 88, .82) !important;
  color: #fff !important;
  background: linear-gradient(135deg, #8e1731, #500918) !important;
  box-shadow:
    0 11px 24px rgba(35, 0, 10, .38),
    inset 0 1px rgba(255, 255, 255, .1) !important;
  filter: none !important;
  transform: translateY(-1px) !important;
}

html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active .rnav-btn.active:hover,
html body.ctv-page-operator.ctv-operator-v2.ctv-subpage-active .rnav-btn.active:focus-visible {
  box-shadow:
    0 11px 24px rgba(35, 0, 10, .38),
    inset 0 -2px var(--rarity),
    inset 0 1px rgba(255, 255, 255, .1) !important;
}