body {
  position: relative;
  z-index: -5;
}

.main-container {
  background-image: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 0;
  left: 0;
  position: relative;
  overflow: hidden;
  z-index: -4;
}

.mesh {
  background-image: url('../assets/images/mesh.png');
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.05;
  background-size: 64px;
  z-index: -1;
}

.circle {
  background-color: var(--color-accent);
  opacity: 0.05;
  width: min(100vw, 100vh);
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: absolute;
}

.circle.one {
  top: 0;
  left: 0;
  transform: translateX(-20%) translateY(-40%);
  animation: drift1 180s linear infinite alternate;
  z-index: -3;
}

.circle.two {
  bottom: 0;
  right: 0;
  transform: translateX(26%) translateY(76%);
  animation: drift2 180s linear infinite alternate;
  z-index: -2;
}

.tools-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
  margin-top: 40px;
}

@keyframes drift1 {
  0% {
    transform: translateX(-20%) translateY(-40%);
  }
  50% {
    transform: translateX(-80%) translateY(calc(50vh - 50%));
  }
  100% {
    transform: translateX(-20%) translateY(calc(100vh - 40%));
  }
}

@keyframes drift2 {
  0% {
    transform: translateX(26%) translateY(76%);
  }
  50% {
    transform: translateX(76%) translateY(calc(-50vh + 37%));
  }
  100% {
    transform: translateX(26%) translateY(calc(-100vh + 72%));
  }
}

.tool-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.tool-bar {
  width: 100%;
  height: 50px;
  background-color: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-stylish);
  font-weight: bold;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  position: relative;
  box-shadow: var(--shadow-md);
}

.tool-bar div:first-child {
  position: absolute;
  font-size: 2rem;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.tool-bar div:first-child:hover {
  transform: translateX(-5px) translateY(-50%);
}

.glass {
  background-color: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}