:root {
  --primary: #046bd2;
  --primary-hover: #0056b3;
  --action: #ff914d;
  --bg: #f8f9fa;
  --border-gray: #e9ecef;
}

body {
  font-family: 'Inter', 'Roboto', sans-serif;
}

.tool-card {
  background: #ffffff;
  border: 1px solid var(--border-gray);
  border-radius: 8px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

.tool-card h3 {
  font-weight: 500;
  font-size: 15px;
}

.tool-icon {
  font-size: 28px;
  color: var(--primary);
}

/* Fade-in animation */
.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Upload Zone (used by all tools later) */
.upload-zone {
  border: 2px dashed var(--border-gray);
  border-radius: 10px;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.upload-zone.dragover {
  border-color: var(--primary);
  background: rgba(4, 107, 210, 0.05);
}