:root {
  --text-color: #ffffff;
}

* {
  color: var(--text-color);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(102, 126, 234, 0.8) 0%,
    rgba(118, 75, 162, 0.9) 100%
  );
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(102, 126, 234, 1) 0%,
    rgba(118, 75, 162, 1) 100%
  );
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 0 12px rgba(102, 126, 234, 0.5);
  transform: scale(1.05);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(
    180deg,
    rgba(102, 126, 234, 1) 0%,
    rgba(118, 75, 162, 1) 100%
  );
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-corner {
  background: rgba(255, 255, 255, 0.05);
}
