/* Critical CSS for essential styling - loads before other CSS files */

/* Core styling - applied immediately to prevent FOUC */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;
  min-height: 100vh;
}

/* Reset basics */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Essential layout containers */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Basic card styles */
.card {
  background-color: var(--color-card-bg, white);
  border-radius: var(--border-radius-md, 6px);
  box-shadow: var(--shadow-sm, 0 2px 5px rgba(0, 0, 0, 0.1));
  padding: 20px;
  margin-bottom: 20px;
}

/* Theme styling - will work with JS theme toggling */
html[data-theme="dark"],
html.dark-theme,
.dark-theme {
  background-color: #1a1a1a;
  color: #f5f5f5;
  color-scheme: dark;
}

html[data-theme="dark"] body,
html.dark-theme body,
.dark-theme body {
  background-color: #1a1a1a;
  color: #f5f5f5;
}

/* Force about section dark theme styles */
.about-section {
  background-color: #2c3e50 !important;
  color: #ecf0f1 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 40px;
}

.about-section h2 {
  color: #ecf0f1 !important;
  margin-bottom: 20px;
  text-align: center;
}

.about-section h3 {
  color: #ecf0f1 !important;
}

.about-section p {
  color: #bdc3c7 !important;
  margin-bottom: 25px;
  line-height: 1.7;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.feature-item {
  background-color: #34495e !important;
  border-color: #4a6278 !important;
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-item h3 {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* No results message styles */
.no-results-message {
  background-color: #34495e !important;
  color: #bdc3c7 !important;
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  border-radius: 10px;
  font-size: 1.1rem;
  display: none;
}

/* Tools filter section styles */
.tools-filter {
  background-color: #2c3e50 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  padding: 20px !important;
  margin-bottom: 25px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.tools-filter .search-container {
  display: flex;
  flex: 1;
  min-width: 250px;
  position: relative;
}

.tools-filter input {
  background-color: #34495e !important;
  border-color: #4a6278 !important;
  color: #ecf0f1 !important;
}

.tools-filter select {
  background-color: #34495e !important;
  border-color: #4a6278 !important;
  color: #ecf0f1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2395a5a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

.tools-filter label {
  color: #bdc3c7 !important;
}

.tools-filter button {
  background-color: #3498db !important;
  color: #f5f5f5 !important;
}

/* Header basic styles */
header {