/* ════════════════════════════════════════════════════════════════════
   CSRadar Re-skin — visual override layer
   Applies the new CSRadar design system on top of the existing site.
   Same class names + HTML structure preserved. Touch only visuals.
   ════════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

/* ── Tokens: rebrand the existing CSS variables ──────────────────── */
/* Hide any IMG that ends up with an empty src (placeholder data not yet loaded) */
img[src=""], img:not([src]) { display: none !important; }
:root {
  /* base */
  --bg:  #0a0d18 !important;
  --bg2: #11152a !important;
  --bg3: #141833 !important;
  --bg4: #1a1f3d !important;
  --bg5: #232a52 !important;

  /* accents */
  --accent:  #5b8cff !important;   /* signature blue */
  --accent2: #8a6bff !important;   /* purple */
  --accent3: #5b8cff !important;
  --green:   #3ddc97 !important;
  --red:     #ff5d8f !important;
  --yellow:  #ffc857 !important;
  --orange:  #ff6b3d !important;

  /* text */
  --text:  #e8ecff !important;
  --text2: #c2c8f0 !important;
  --muted: #8b91c4 !important;

  /* borders */
  --border:  #232a52 !important;
  --border2: #2c3463 !important;

  --card: #141833 !important;
  --glow: rgba(91,140,255,0.18) !important;

  --hh: 64px !important;
  --radius: 14px !important;
}

/* ── Body backdrop: glowy radial gradients (kill the diagonal grid) */
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
  background: var(--bg) !important;
  -webkit-font-smoothing: antialiased;
}
body::before {
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(91,140,255,0.16), transparent 60%),
    radial-gradient(900px 600px at 95% 5%, rgba(138,107,255,0.12), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(255,107,61,0.06), transparent 60%) !important;
  opacity: 1 !important;
}

/* ────────────────────────────────────────────────────────────────────
   HEADER
   ──────────────────────────────────────────────────────────────────── */
header {
  background: rgba(10,13,24,0.85) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  border-bottom: 1px solid var(--border) !important;
  height: var(--hh) !important;
  padding: 0 28px !important;
  gap: 14px !important;
}
.logo img { height: 38px !important; }

/* Header pills */
.hbadge {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important;
  transition: 0.15s !important;
}
.hbadge:hover { color: var(--text) !important; border-color: var(--border2) !important; filter: none !important; }
.hbadge.g { color: var(--green) !important; background: rgba(61,220,151,0.08) !important; border-color: rgba(61,220,151,0.25) !important; }
.hbadge.b { color: var(--accent) !important; background: rgba(91,140,255,0.10) !important; border-color: rgba(91,140,255,0.30) !important; }
.hbadge.o { color: var(--orange) !important; background: rgba(255,107,61,0.10) !important; border-color: rgba(255,107,61,0.30) !important; }
.hbadge .dot {
  width: 7px !important; height: 7px !important;
  box-shadow: 0 0 0 0 rgba(61,220,151,0.5);
  animation: csr-pulse 2s infinite !important;
}
@keyframes csr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,220,151,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(61,220,151,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); }
}
.hcount {
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}

/* Buttons */
.btn {
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-family: 'Manrope', sans-serif !important;
  transition: 0.15s !important;
}
.btn-bl {
  background: rgba(91,140,255,0.14) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(91,140,255,0.35) !important;
}
.btn-bl:hover {
  background: rgba(91,140,255,0.24) !important;
  border-color: rgba(91,140,255,0.55) !important;
  color: var(--accent) !important;
  transform: none !important;
}
.btn-gn {
  background: linear-gradient(135deg, var(--green), #2db77c) !important;
  color: #06150f !important;
  border: 1px solid rgba(61,220,151,0.4) !important;
}
.btn-gn:hover { filter: brightness(1.08); }
.btn-rd {
  background: rgba(255,93,143,0.14) !important;
  color: var(--red) !important;
  border: 1px solid rgba(255,93,143,0.35) !important;
}
.btn-rd:hover { background: rgba(255,93,143,0.22) !important; }
.btn-gh {
  background: var(--bg3) !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
}
.btn-gh:hover { background: var(--bg4) !important; color: var(--text) !important; border-color: var(--border2) !important; }
.abadge {
  background: linear-gradient(135deg, var(--yellow), #d97706) !important;
  color: #1a1206 !important;
  border-radius: 999px !important;
}

/* Lang switcher */
.lang-btn, .footer-lang-btn {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  height: 38px !important;
  padding: 0 12px !important;
}
.lang-btn:hover, .footer-lang-btn:hover { border-color: var(--accent) !important; }
.lang-drop {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.8) !important;
}
.lang-opt { border-radius: 8px !important; }
.lang-opt:hover, .lang-opt.active { background: var(--bg4) !important; }

/* ────────────────────────────────────────────────────────────────────
   SIDEBAR
   ──────────────────────────────────────────────────────────────────── */
aside {
  /* float as a card: detach from edges, add radius + border, leave breathing room */
  top: calc(var(--hh) + 18px) !important;
  left: 22px !important;
  bottom: 22px !important;
  width: calc(var(--sw) - 36px) !important;
  background: linear-gradient(180deg, var(--bg2), rgba(17,21,42,0.6)) !important;
  border: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 14px 12px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 24px 60px -32px rgba(0,0,0,0.6) !important;
}

/* Push main content right so it doesn't slide under the floating sidebar */
main {
  margin-left: calc(var(--sw) + 8px) !important;
  padding: 22px 28px !important;
}

/* Footer needs the same offset */
.site-footer { margin-left: calc(var(--sw) + 8px) !important; }

/* Header bottom border softer so it doesn't visually clash with the floating card */
header {
  border-bottom-color: transparent !important;
}

/* Mobile: revert to no offset (sidebar is replaced by drawer) */
@media (max-width: 768px) {
  main { margin-left: 0 !important; padding: 12px !important; padding-bottom: 80px !important; }
  .site-footer { margin-left: 0 !important; }
  aside { display: none !important; }
}
.ni {
  border-radius: 10px !important;
  padding: 11px 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--muted) !important;
  margin-bottom: 3px !important;
  transition: 0.15s !important;
  gap: 12px !important;
}
.ni:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,0.03) !important;
}
.ni.active {
  background: var(--bg4) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px var(--border) !important;
  font-weight: 700 !important;
}
.ni.active .ic, .ni:hover .ic { color: var(--text) !important; }
.ni .ic {
  width: 20px !important; height: 20px !important;
  color: var(--muted) !important;
}
.ni .ic svg { width: 18px !important; height: 18px !important; stroke-width: 1.8 !important; }
.ni.active .ic svg, .ni:hover .ic svg { color: var(--accent) !important; stroke: var(--accent) !important; }
.ndiv { background: rgba(255,255,255,0.06) !important; }

/* Main + section */
main { padding: 22px 28px !important; }
.sec {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin: 6px 4px 14px !important;
}
.sec .cnt {
  background: rgba(91,140,255,0.14) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(91,140,255,0.3) !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

/* ────────────────────────────────────────────────────────────────────
   TICKER
   ──────────────────────────────────────────────────────────────────── */
.ticker-wrap {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 10px 18px !important;
  margin-bottom: 22px !important;
}
.ticker-wrap::before { background: linear-gradient(to right, var(--bg2), transparent) !important; }
.ticker-wrap::after  { background: linear-gradient(to left,  var(--bg2), transparent) !important; }
.ti { font-size: 12.5px !important; color: var(--muted) !important; font-weight: 600 !important; }
.ti .sn { color: var(--text2) !important; }
.ti .st { color: var(--yellow) !important; }

/* ────────────────────────────────────────────────────────────────────
   PROMO CARDS GRID (.pg / .pc)
   ──────────────────────────────────────────────────────────────────── */
.pg { gap: 18px !important; margin-bottom: 32px !important; }
.pc {
  background: linear-gradient(180deg, var(--bg2), var(--bg3)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 22px 20px 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -32px rgba(0,0,0,0.6) !important;
  transition: 0.18s !important;
}
.pc::before {
  background: linear-gradient(135deg, rgba(91,140,255,0.06), rgba(138,107,255,0.05)) !important;
}
.pc:hover {
  border-color: var(--border2) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 50px -20px rgba(91,140,255,0.3), 0 0 0 1px rgba(91,140,255,0.15) !important;
}
.pc-rank {
  background: rgba(255,255,255,0.04) !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  font-weight: 800 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.04em !important;
}
.pc-logo {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  height: 88px !important;
  margin-bottom: 14px !important;
}
.pc-logo-ph {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  color: var(--accent) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.pc-stars-val { color: var(--yellow) !important; font-weight: 800 !important; }
.pc-stars-ico { color: var(--yellow) !important; }
.pc-stars-cnt { color: var(--muted) !important; }
.pc-bonus {
  background: rgba(255,107,61,0.10) !important;
  border: 1px solid rgba(255,107,61,0.25) !important;
  color: var(--orange) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  align-self: flex-start !important;
  margin-bottom: 12px !important;
}
.pc-bonus .fire { color: var(--orange) !important; }
.pc-code-row {
  background: rgba(91,140,255,0.08) !important;
  border: 1px dashed rgba(91,140,255,0.4) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
}
.pc-code-val {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
.pc-copy-btn { color: var(--accent) !important; }
.pc-copy-btn:hover { color: var(--text) !important; }
.pc-go {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  border-radius: 10px !important;
  padding: 11px !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px -8px rgba(91,140,255,0.6) !important;
}
.pc-go:hover { opacity: 1 !important; filter: brightness(1.1); transform: none !important; }

/* tags */
.tag { font-size: 10.5px !important; padding: 4px 10px !important; border-radius: 999px !important; letter-spacing: 0.04em !important; }
.tc { background: rgba(255,107,61,0.12) !important; color: var(--orange)  !important; border: 1px solid rgba(255,107,61,0.28) !important; }
.tt { background: rgba(91,140,255,0.12) !important; color: var(--accent)  !important; border: 1px solid rgba(91,140,255,0.28) !important; }
.tk { background: rgba(138,107,255,0.12) !important; color: #b39bff !important; border: 1px solid rgba(138,107,255,0.28) !important; }
.tm { background: rgba(61,220,151,0.12) !important; color: var(--green)   !important; border: 1px solid rgba(61,220,151,0.28) !important; }

/* ────────────────────────────────────────────────────────────────────
   BANNER CARDS — Featured style (big, brand left + pros panel right)
   ──────────────────────────────────────────────────────────────────── */
.banners-grid { gap: 18px !important; margin-bottom: 24px !important; }
.banner-card {
  border-radius: 22px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 24px 60px -32px rgba(0,0,0,0.6) !important;
  min-height: 260px !important;
  padding: 30px 34px !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  transition: 0.18s !important;
  cursor: pointer !important;
}
.banner-card:hover {
  border-color: var(--border2) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 28px 60px -24px rgba(91,140,255,0.35),
              0 1px 0 rgba(255,255,255,0.05) inset !important;
}
.banner-bg {
  position: absolute !important; inset: 0 !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.18 !important; /* keep image subtle */
  filter: blur(2px) saturate(120%) !important;
}
.banner-overlay {
  position: absolute !important; inset: 0 !important; z-index: 1 !important;
  background:
    radial-gradient(700px 380px at 80% 30%, rgba(91,140,255,0.18), transparent 60%),
    linear-gradient(180deg, rgba(17,21,42,0.4), rgba(10,13,24,0.6)) !important;
}
.banner-content {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1.6fr 1fr !important;
  gap: 28px !important;
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* badge above the title (Sub line e.g. "Рекомендуем" / "Топ площадки 2026") */
.banner-tag, .banner-badge {
  grid-column: 1 !important;
  align-self: start !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  background: rgba(61,220,151,0.12) !important;
  color: var(--green) !important;
  border: 1px solid rgba(61,220,151,0.3) !important;
  backdrop-filter: blur(6px) !important;
  margin-bottom: 0 !important;
}
.banner-tag::before {
  content: "✓" !important;
  font-weight: 800 !important;
  font-size: 11px !important;
}
.bn-purple .banner-tag,
.bn-blue   .banner-tag {
  background: rgba(91,140,255,0.14) !important;
  color: var(--accent) !important;
  border-color: rgba(91,140,255,0.35) !important;
}
.bn-orange .banner-tag {
  background: rgba(255,107,61,0.14) !important;
  color: var(--orange) !important;
  border-color: rgba(255,107,61,0.35) !important;
}
.bn-red .banner-tag {
  background: rgba(255,93,143,0.14) !important;
  color: var(--red) !important;
  border-color: rgba(255,93,143,0.35) !important;
}

/* big brand title in italic */
.banner-title {
  grid-column: 1 !important;
  grid-row: 2 !important;
  font-family: 'Manrope', sans-serif !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 36px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  word-break: break-word !important;
  white-space: normal !important;
}
/* logo mark — placeholder for brand image (or shows "LOGO" text if no image set) */
.banner-title::before { display: none !important; }
.banner-mark {
  flex: 0 0 56px !important;
  width: 56px !important; height: 56px !important;
  border-radius: 14px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--fg-dim, #5a6098) !important;
  letter-spacing: 0.08em !important;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 6px, transparent 6px 12px) !important;
  position: relative !important;
  overflow: hidden !important;
}
.banner-mark.has-image {
  background: var(--bg) !important;
  background-image: var(--mark-bg) !important; /* JS sets style.backgroundImage directly */
  border-color: var(--border) !important;
}

/* pros panel on the right (bordered card with title "Плюсы сайта") */
.banner-pros {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  align-self: center !important;
  background: rgba(91,140,255,0.06) !important;
  border: 1px solid rgba(91,140,255,0.22) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  backdrop-filter: blur(8px) !important;
  font-size: 13px !important;
  color: var(--text) !important;
  line-height: 1.55 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  position: relative !important;
  text-shadow: none !important;
  overflow: hidden !important;
}
/* decorative big + in top-right corner of the pros panel */
.banner-pros::after {
  content: "+" !important;
  position: absolute !important;
  top: 10px !important; right: 16px !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: rgba(91,140,255,0.25) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
.banner-pros::before { display: none !important; } /* replaced by real .banner-pros-title element */
.banner-pros-title {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: var(--accent) !important;
  margin-bottom: 4px !important;
  letter-spacing: 0 !important;
}
.banner-pros > div {
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.92) !important;
}
.banner-pros > div span {
  color: var(--accent) !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}
.banner-cta { display: none !important; } /* CTA replaced by clickable card */

/* tone tweaks for color variants */
.bn-blue   .banner-overlay { background: radial-gradient(700px 380px at 80% 30%, rgba(91,140,255,0.18), transparent 60%), linear-gradient(180deg, rgba(17,21,42,0.4), rgba(10,13,24,0.6)) !important; }
.bn-purple .banner-overlay { background: radial-gradient(700px 380px at 80% 30%, rgba(138,107,255,0.22), transparent 60%), linear-gradient(180deg, rgba(28,18,52,0.4), rgba(15,10,30,0.6)) !important; }
.bn-green  .banner-overlay { background: radial-gradient(700px 380px at 80% 30%, rgba(61,220,151,0.18), transparent 60%), linear-gradient(180deg, rgba(10,30,22,0.4), rgba(8,18,15,0.6)) !important; }
.bn-orange .banner-overlay { background: radial-gradient(700px 380px at 80% 30%, rgba(255,107,61,0.18), transparent 60%), linear-gradient(180deg, rgba(40,20,12,0.4), rgba(20,10,6,0.6)) !important; }
.bn-red    .banner-overlay { background: radial-gradient(700px 380px at 80% 30%, rgba(255,93,143,0.18), transparent 60%), linear-gradient(180deg, rgba(40,12,24,0.4), rgba(20,6,12,0.6)) !important; }

/* responsive */
@media (max-width: 1100px) {
  .banner-card { padding: 22px !important; min-height: auto !important; }
  .banner-content { grid-template-columns: 1fr !important; gap: 16px !important; }
  .banner-title { font-size: 32px !important; white-space: normal !important; }
  .banner-mark { width: 48px !important; height: 48px !important; flex-basis: 48px !important; border-radius: 12px !important; }
  .banner-pros { grid-row: auto !important; grid-column: 1 !important; }
}

/* ────────────────────────────────────────────────────────────────────
   NEWS CARDS
   ──────────────────────────────────────────────────────────────────── */
.ng { gap: 18px !important; }
.ncard {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: 0.18s !important;
}
.ncard:hover {
  border-color: var(--border2) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 50px -20px rgba(91,140,255,0.25) !important;
}
.nth { background: linear-gradient(135deg, var(--bg3), var(--bg2)) !important; }
.ntl {
  border-radius: 999px !important;
  font-size: 10.5px !important;
  padding: 4px 11px !important;
  letter-spacing: 0.06em !important;
  backdrop-filter: blur(6px) !important;
}
.ntl-hot    { background: rgba(255,107,61,0.85) !important; }
.ntl-event  { background: rgba(255,200,87,0.9) !important; color: #1a1206 !important; }
.ntl-update { background: rgba(61,220,151,0.85) !important; color: #06150f !important; }
.ntl-default{ background: rgba(138,107,255,0.85) !important; color: #fff !important; }
.nb { padding: 16px 18px !important; gap: 10px !important; }
.nb-tag { color: var(--green) !important; letter-spacing: 0.08em !important; }
.ntt {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  font-family: 'Manrope', sans-serif !important;
}
.nm {
  font-size: 12px !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-variant-numeric: tabular-nums;
}

/* news detail */
.nart-title, .news-page h1, .static-page h1, .sd-site-name,
.sd-rating-num, .pd-nick, .rating-page-header h2 {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* ────────────────────────────────────────────────────────────────────
   RATINGS PAGE (.rc)
   ──────────────────────────────────────────────────────────────────── */
.rating-page-header h2 { font-size: 30px !important; }
.rating-page-header p  { color: var(--muted) !important; }
.rc {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  transition: 0.18s !important;
}
.rc:hover {
  border-color: var(--border2) !important;
  box-shadow: 0 14px 40px -20px rgba(91,140,255,0.3) !important;
}
.rc-logo-wrap {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}
.rc-logo-ph {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}
.rc-rank-badge {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}
.rc:nth-child(1) .rc-rank-badge { color: var(--yellow) !important; background: rgba(255,200,87,0.1) !important; border-color: rgba(255,200,87,0.3) !important; }
.rc:nth-child(2) .rc-rank-badge { color: #c2c8f0 !important; background: rgba(194,200,240,0.08) !important; border-color: rgba(194,200,240,0.25) !important; }
.rc:nth-child(3) .rc-rank-badge { color: var(--orange) !important; background: rgba(255,107,61,0.1) !important; border-color: rgba(255,107,61,0.3) !important; }
.rc-star-num { font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; }
.rc-cat-pill { border-radius: 999px !important; font-weight: 700 !important; }
.rc-go-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px -8px rgba(91,140,255,0.5) !important;
}
.rc-detail-btn {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}
.rc-detail-btn:hover { border-color: var(--accent) !important; color: var(--text) !important; }

/* ────────────────────────────────────────────────────────────────────
   SITE DETAIL
   ──────────────────────────────────────────────────────────────────── */
.sd-left-card, .sd-pros-card, .sd-cons-card, .sd-step, .sd-sim-card, .news-sb-card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
}
.sd-logo-wrap, .sd-code-box, .sd-vote-section,
.sd-payment-tag, .sd-sim-logo, .news-sb-logo, .pd-photo, .pd-photo-ph {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
}
.sd-tabs { border-bottom: 1px solid var(--border) !important; }
.sd-tab { font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; }
.sd-tab.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
.sd-code-row2 {
  background: rgba(91,140,255,0.08) !important;
  border: 1px dashed rgba(91,140,255,0.4) !important;
  border-radius: 10px !important;
}
.sd-code-val {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--accent) !important;
}
.sd-goto-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  border-radius: 12px !important;
  font-family: 'Manrope', sans-serif !important;
  box-shadow: 0 12px 28px -10px rgba(91,140,255,0.6) !important;
}
.sd-step-num {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  font-family: 'Manrope', sans-serif !important;
}
.sd-det-fill { background: linear-gradient(90deg, var(--accent), var(--accent2)) !important; }

/* ────────────────────────────────────────────────────────────────────
   FILTER BAR & TACTICS
   ──────────────────────────────────────────────────────────────────── */
.filter-tab {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  height: 36px !important;
  font-weight: 600 !important;
}
.filter-tab:hover { border-color: var(--border2) !important; color: var(--text) !important; }
.filter-tab.active {
  background: rgba(91,140,255,0.12) !important;
  border-color: rgba(91,140,255,0.4) !important;
  color: var(--accent) !important;
}
.tactic-btn {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  height: 38px !important;
  padding: 0 16px !important;
  font-weight: 600 !important;
}
.tactic-btn:hover { border-color: var(--accent) !important; background: rgba(91,140,255,0.06) !important; }

/* ────────────────────────────────────────────────────────────────────
   ADMIN
   ──────────────────────────────────────────────────────────────────── */
.atab {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
}
.atab:hover { border-color: var(--border2) !important; color: var(--text) !important; }
.atab.active {
  background: rgba(91,140,255,0.12) !important;
  border-color: rgba(91,140,255,0.4) !important;
  color: var(--accent) !important;
}
.af { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 16px !important; }
.fld input, .fld select, .fld textarea {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: 'Manrope', sans-serif !important;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--accent) !important;
  background: var(--bg2) !important;
  box-shadow: 0 0 0 3px rgba(91,140,255,0.15) !important;
}
.atable th { background: var(--bg2) !important; }
.atable tr:hover td { background: var(--bg2) !important; }

/* ────────────────────────────────────────────────────────────────────
   MODAL & TOAST
   ──────────────────────────────────────────────────────────────────── */
.ov, .tactic-ov, .edit-ov { background: rgba(8,11,22,0.7) !important; backdrop-filter: blur(8px) !important; }
.modal, .tactic-modal, .edit-modal {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8) !important;
}
.modal h2 { font-family: 'Manrope', sans-serif !important; }
.toast {
  background: var(--bg3) !important;
  border: 1px solid rgba(61,220,151,0.4) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.8) !important;
}

/* ────────────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────────────── */
.site-footer {
  background: linear-gradient(180deg, transparent, rgba(17,21,42,0.6)) !important;
  border-top: 1px solid var(--border) !important;
  padding: 28px 32px !important;
  margin-top: 40px !important;
}
.footer-inner { max-width: 1280px !important; gap: 24px !important; }
.footer-copy-txt { color: var(--muted) !important; font-size: 12px !important; }
.footer-logo {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  font-size: 18px !important;
}
.footer-link {
  font-family: 'Manrope', sans-serif !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
}
.footer-link:hover { background: var(--bg3) !important; color: var(--text) !important; }

/* ────────────────────────────────────────────────────────────────────
   SEO BLOCK ("О чём эта страница")
   ──────────────────────────────────────────────────────────────────── */
.seo-wrap {
  margin: 36px 0 0 !important;
  background: linear-gradient(180deg, var(--bg2), var(--bg3)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 28px 32px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -32px rgba(0,0,0,0.6) !important;
  position: relative !important;
  overflow: hidden !important;
}
.seo-wrap::before {
  content: "" !important;
  position: absolute !important; left: 0; top: 0; width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent2)) !important;
}
.seo-inner { max-width: 100% !important; padding: 0 8px !important; }
.seo-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.seo-title::before {
  content: "" !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 0 12px var(--accent) !important;
}
.seo-toggle {
  font-family: 'Manrope', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--accent) !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(91,140,255,0.10) !important;
  border: 1px solid rgba(91,140,255,0.25) !important;
  transition: 0.15s !important;
}
.seo-toggle:hover { background: rgba(91,140,255,0.18) !important; color: var(--text) !important; }
.seo-body {
  font-size: 14.5px !important;
  color: var(--text2) !important;
  line-height: 1.8 !important;
  margin-top: 14px !important;
}

/* ────────────────────────────────────────────────────────────────────
   FAQ ACCORDION
   ──────────────────────────────────────────────────────────────────── */
.faq-wrap {
  margin: 22px 0 36px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.faq-inner { max-width: 100% !important; padding: 0 !important; }
.faq-h {
  font-family: 'Manrope', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--text) !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.faq-h::before {
  content: "" !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--accent2) !important;
  box-shadow: 0 0 12px var(--accent2) !important;
}
.faq-item {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: 0.18s !important;
}
.faq-item:hover { border-color: var(--border2) !important; }
.faq-q {
  background: transparent !important;
  padding: 16px 22px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  transition: 0.15s !important;
}
.faq-q:hover { background: rgba(255,255,255,0.02) !important; color: var(--text) !important; }
.faq-q.open { background: transparent !important; color: var(--accent) !important; }
.faq-chevron {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  transition: 0.18s !important;
}
.faq-q.open .faq-chevron {
  background: rgba(91,140,255,0.16) !important;
  border-color: rgba(91,140,255,0.35) !important;
  color: var(--accent) !important;
  transform: rotate(180deg) !important;
}
.faq-a-inner {
  padding: 14px 22px 18px !important;
  font-size: 14.5px !important;
  color: var(--text2) !important;
  line-height: 1.8 !important;
  border-top: 1px solid var(--border) !important;
}

/* ────────────────────────────────────────────────────────────────────
   BOTTOM NAV (mobile)
   ──────────────────────────────────────────────────────────────────── */
.bottom-nav {
  background: rgba(10,13,24,0.92) !important;
  border-top: 1px solid var(--border) !important;
  backdrop-filter: blur(16px) !important;
}
.bn-item.active { color: var(--accent) !important; }

/* ────────────────────────────────────────────────────────────────────
   MISC HEADINGS
   ──────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, .nart-h, .news-sb-head, .sd-site-name {
  font-family: 'Manrope', sans-serif !important;
}
.nart-h { color: var(--accent) !important; }

/* Players */
.player-card { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; }
.player-card:hover { border-color: var(--border2) !important; }
.player-card-info { background: linear-gradient(0deg, rgba(10,13,24,0.92), transparent) !important; }
.player-card-name { font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; }
.player-card-rating { background: rgba(0,0,0,0.6) !important; border-radius: 999px !important; }

/* Static pages */
.static-page h1 { font-weight: 800 !important; letter-spacing: -0.02em !important; }

/* ───── Subtle scrollbar polish ───── */
::-webkit-scrollbar-thumb { background: var(--border2) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--muted) !important; }