body.tools-hub-page {
  box-sizing: border-box;
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  padding-top: 80px;
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.tools-hub-page .bg-animation {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
}

.tools-main-header h1 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  background: var(--series-gradient, var(--tech-gradient));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tools-main-header p {
  margin: 0 0 1.25rem;
  color: var(--text-secondary);
  font-size: 1.05rem;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.tools-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 2rem 1.25rem 1.5rem;
  backdrop-filter: blur(20px);
}

.tools-item:hover {
  border-color: var(--series-accent, rgba(79, 172, 254, 0.45));
}

.tools-item-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--series-gradient, var(--tech-gradient));
  color: #fff;
  font-size: 2rem;
  margin: 0 auto 1.25rem;
}

.tools-item[data-cat="crypto"] { --series-gradient: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); --series-accent: #ff8a5b; }
.tools-item[data-cat="image"] { --series-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --series-accent: #8b7cf6; }
.tools-item[data-cat="file"] { --series-gradient: linear-gradient(135deg, #64748b 0%, #38bdf8 100%); --series-accent: #38bdf8; }
.tools-item[data-cat="life"] { --series-gradient: linear-gradient(135deg, #f97316 0%, #e11d48 100%); --series-accent: #fb7185; }
.tools-item[data-cat="video"] { --series-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --series-accent: #00d4ff; }
.tools-item[data-cat="text"] { --series-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --series-accent: #f472b6; }
.tools-item[data-cat="dev"] { --series-gradient: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); --series-accent: #38bdf8; }
.tools-item[data-cat="popular"] { --series-gradient: linear-gradient(135deg, #f6d365 0%, #fda085 100%); --series-accent: #fb923c; }
.tools-item[data-cat="markets"] { --series-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); --series-accent: #2dd4bf; }

.tools-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.tools-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 1200px) {
  .tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tools-main-header h1 {
    font-size: 1.6rem;
  }
}

@media (max-width: 520px) {
  .tools-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tools-item {
    padding: 1.5rem 1rem 1.25rem;
  }

  .tools-item-icon {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
    border-radius: 16px;
  }
}