html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 138, 61, 0.95) rgba(6, 10, 20, 0.72);
}

body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 138, 61, 0.95) rgba(6, 10, 20, 0.72);
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background:
    linear-gradient(
      180deg,
      rgba(6, 10, 20, 0.96),
      rgba(11, 18, 34, 0.92)
    );
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.38),
    inset 1px 0 0 rgba(255, 255, 255, 0.035);
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 210, 86, 1) 0%,
      rgba(255, 138, 61, 1) 34%,
      rgba(255, 61, 105, 0.98) 68%,
      rgba(145, 70, 255, 0.95) 100%
    )
    padding-box;
  box-shadow:
    0 0 14px rgba(255, 138, 61, 0.42),
    0 0 28px rgba(145, 70, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
}

::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255, 231, 128, 1) 0%,
      rgba(255, 156, 92, 1) 30%,
      rgba(255, 77, 132, 1) 66%,
      rgba(95, 133, 255, 1) 100%
    )
    padding-box;
  box-shadow:
    0 0 18px rgba(255, 138, 61, 0.58),
    0 0 34px rgba(255, 77, 132, 0.26),
    0 0 46px rgba(95, 133, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

::-webkit-scrollbar-thumb:active {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 191, 71, 1) 22%,
      rgba(255, 51, 71, 1) 58%,
      rgba(141, 108, 255, 1) 100%
    )
    padding-box;
  box-shadow:
    0 0 24px rgba(255, 191, 71, 0.62),
    0 0 42px rgba(141, 108, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

::-webkit-scrollbar-corner {
  background: rgba(6, 10, 20, 0.96);
}