html:has(.dota-direct-tool) {
  scrollbar-color: #963cff #09090d;
  scrollbar-width: thin;
}

html:has(.dota-direct-tool)::-webkit-scrollbar,
.dota-direct-tool *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html:has(.dota-direct-tool)::-webkit-scrollbar-track,
.dota-direct-tool *::-webkit-scrollbar-track {
  background: #09090d;
}

html:has(.dota-direct-tool)::-webkit-scrollbar-thumb,
.dota-direct-tool *::-webkit-scrollbar-thumb {
  border: 2px solid #09090d;
  border-radius: 999px;
  background: linear-gradient(180deg, #a94cff, #6f2cba);
}

html:has(.dota-direct-tool)::-webkit-scrollbar-thumb:hover,
.dota-direct-tool *::-webkit-scrollbar-thumb:hover {
  background: #b768ff;
}

#root {
  --eovant-tool-bg: #08080c;
  --eovant-tool-panel: #111116;
  --eovant-tool-panel-2: #1c1826;
  --eovant-tool-line: rgba(255, 255, 255, 0.11);
  --eovant-tool-accent: #963cff;
  --eovant-tool-lime: #91f21e;
  min-height: 760px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f7f8fb;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  box-shadow: none;
  scrollbar-color: #963cff #09090d;
  scrollbar-width: thin;
}

#root > div {
  width: 100%;
  max-width: none;
  padding-inline: 0 !important;
  background: transparent !important;
}

#root header {
  position: relative;
  min-height: 76px;
  padding: 10px 0 22px;
  border-bottom: 1px solid var(--eovant-tool-line);
}

#root header > h1 {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  display: block !important;
  flex: 0 1 auto;
  max-width: calc(100% - 130px);
  margin: 0 !important;
  translate: none !important;
  transform: none !important;
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.045em;
}

#root header > h1::after {
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--eovant-tool-accent), var(--eovant-tool-lime));
  content: "";
}

#root header > div.relative {
  z-index: 5;
  margin-top: 0;
  margin-left: auto;
}

#root header button {
  min-width: 104px;
  border: 1px solid rgba(150, 60, 255, 0.5) !important;
  border-radius: 12px !important;
  background: #1c1826 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

#root > div > section,
#root > div > div {
  width: 100%;
}

#root h2 {
  color: #fff;
  font-size: clamp(1.65rem, 3vw, 2.5rem) !important;
  font-weight: 900;
  letter-spacing: -0.035em;
}

#root h3,
#root h6 {
  color: #fff;
  font-weight: 850;
}

#root p {
  color: #a6a6b6;
}

#root hr {
  background: linear-gradient(90deg, transparent, rgba(150, 60, 255, 0.65), transparent) !important;
  opacity: 0.75 !important;
}

#root a[href="/en/tools"] {
  display: none;
}

#root .bg-gray-950,
#root .bg-pink-950 {
  background-color: transparent;
}

#root .bg-pink-950 {
  min-height: 132px;
  border: 1px solid var(--eovant-tool-line);
  border-left: 3px solid var(--eovant-tool-accent);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(150, 60, 255, 0.13), rgba(17, 17, 22, 0.96)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

#root .bg-pink-950:hover {
  transform: translateY(-2px);
  border-color: rgba(150, 60, 255, 0.62);
  background: linear-gradient(145deg, rgba(150, 60, 255, 0.2), rgba(17, 17, 22, 0.98)) !important;
}

#root .from-purple-900 {
  border: 1px solid var(--eovant-tool-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #1c1826, #111116) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
}

#root .bg-gray-800,
#root .bg-gray-800\/50,
#root .bg-white\/5 {
  background-color: #1c1b24 !important;
}

#root .bg-purple-700\/50 {
  border: 1px solid rgba(150, 60, 255, 0.4);
  background: rgba(150, 60, 255, 0.16) !important;
}

#root .text-yellow-300,
#root .text-yellow-400 {
  color: #c99cff !important;
}

#root .bg-yellow-400\/10,
#root .bg-yellow-400\/20 {
  background-color: rgba(150, 60, 255, 0.13) !important;
}

#root select,
#root input[type="number"] {
  min-height: 38px;
  border: 1px solid #3b3348 !important;
  border-radius: 9px !important;
  outline: 0;
  background: #0d0d12 !important;
  color: #f7f8fb !important;
  cursor: pointer;
}

#root select:focus,
#root input[type="number"]:focus {
  border-color: var(--eovant-tool-accent) !important;
  box-shadow: 0 0 0 3px rgba(150, 60, 255, 0.18);
}

#root option {
  background: #111116;
  color: #fff;
}

#root input[type="checkbox"],
#root input[type="radio"] {
  accent-color: var(--eovant-tool-accent);
}

#root .overflow-x-auto {
  border-block: 1px solid var(--eovant-tool-line);
  border-radius: 0 !important;
  background: rgba(12, 12, 17, 0.76);
}

#root table {
  color: #e8e8ef;
}

#root th {
  color: #c99cff;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

#root td,
#root th {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#root tbody tr {
  transition: background 140ms ease;
}

#root tbody tr:hover {
  background: rgba(150, 60, 255, 0.09);
}

#root .text-5xl {
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
}

#root .text-3xl {
  font-size: 1.35rem !important;
}

@media (max-width: 680px) {
  #root {
    min-height: 680px;
  }

  #root header {
    align-items: flex-start;
    gap: 16px;
    min-height: 70px;
  }

  #root header > h1 {
    max-width: calc(100% - 112px);
    font-size: 1.55rem;
  }

  #root .bg-pink-950 {
    min-height: 0;
  }
}