/* ===== Algorithms Landing Page Styles ===== */

.algo-controls {
  margin: 2rem 0; padding: 1.5rem; background: var(--bg-secondary);
  border-radius: var(--radius); border: 1px solid var(--border-color);
}
.search-bar-container { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.algo-search {
  flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--border-color);
  border-radius: var(--radius); font-size: 1rem; font-family: inherit; transition: var(--transition);
}
.algo-search:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); }
.algo-filters { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.algo-select {
  padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius);
  font-size: 0.875rem; background: var(--bg-color); cursor: pointer;
}
.algo-select:focus { outline: none; border-color: var(--primary-color); }
.algo-filters label { font-size: 0.875rem; color: var(--text-light); }

/* Type group headers */
.algo-type-group { scroll-margin-top: calc(var(--nav-height, 64px) + 16px); }
.algo-type-header {
  position: sticky; top: calc(var(--nav-height, 64px)); z-index: 40;
  display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 1rem;
  margin: 1.5rem 0 1rem;
  background: linear-gradient(90deg, var(--bg-secondary), rgba(248, 250, 252, 0.9));
  backdrop-filter: blur(6px); border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-color); border-radius: var(--radius); box-shadow: var(--shadow);
}
.algo-type-icon { font-size: 1.3rem; }
.algo-type-title { font-size: 0.95rem; font-weight: 600; color: var(--text-light); margin: 0; flex: 1; }
.algo-type-count {
  font-size: 0.75rem; font-weight: 600; color: var(--primary-color);
  background: rgba(37, 99, 235, 0.08); padding: 0.25rem 0.65rem; border-radius: 12px;
}

/* Topic card */
.algo-card {
  background: var(--bg-color); border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-color); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin-bottom: 1rem; box-shadow: var(--shadow); transition: var(--transition);
}
.algo-card:hover { box-shadow: var(--shadow-lg); transform: translateX(4px); }
.algo-card-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.algo-card-name { font-size: 1.2rem; font-weight: 600; color: var(--text-color); flex: 1; margin: 0; }
.algo-pri { color: #fff; padding: 0.2rem 0.7rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; }
.algo-chip {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  padding: 0.2rem 0.7rem; border-radius: 20px; font-size: 0.75rem; color: var(--text-light); font-weight: 500;
}
.algo-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.75rem; }
.algo-outline { margin: 0 0 1rem 1.15rem; }
.algo-outline li { font-size: 0.875rem; color: var(--text-light); margin-bottom: 0.3rem; }
.algo-open { display: inline-block; margin-top: 0.25rem; }

/* Feedback states */
.algo-empty { text-align: center; padding: 3rem; color: var(--text-light); }
.results-info { margin: 1rem 0; font-size: 0.875rem; color: var(--text-light); }
.loading-message { text-align: center; padding: 3rem; color: var(--text-light); font-size: 1.1rem; }

/* Back to top */
.back-to-top {
  position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; border: none;
  border-radius: 50%; background: var(--primary-color); color: #fff; font-size: 1.3rem;
  cursor: pointer; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden;
  transform: translateY(12px); transition: var(--transition); z-index: 95;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--primary-dark); }

@media (max-width: 768px) {
  .back-to-top { bottom: 1.25rem; right: 1.25rem; width: 42px; height: 42px; }
}