/* ===================================================================
   Меню: только 5 главных разделов + хаб "Инструменты" на стр. "Ссылки"
   Подключается ПОСЛЕ остальных css, поэтому переопределяет их.
   =================================================================== */

/* Прячем вспомогательные и кнопку "Ещё" на ВСЕХ экранах.
   Админ (.admin-only) НЕ прячем - им управляет app.js (виден только админу). */
.main-nav .nav-btn.nav-secondary:not(.admin-only) { display: none !important; }
.nav-more-btn { display: none !important; }

/* ---- Десктоп: спокойный вид, без "прыжка" и мерцания ---- */
@media (min-width: 769px) {
  .main-nav { justify-content: center; gap: 8px; }
  .nav-btn::before { display: none !important; content: none !important; }
  .nav-btn { min-width: 0; padding: 10px 20px; }
  .nav-btn:hover, .nav-btn.active { transform: none !important; box-shadow: none !important; }
}

/* ---- Мобильная нижняя панель: делаем кнопки читаемыми ---- */
@media (max-width: 768px) {
  .main-nav .nav-btn.nav-secondary:not(.admin-only) { display: none !important; }
  .nav-more-btn { display: none !important; }

  .main-nav .nav-btn { color: rgba(255, 255, 255, 0.82) !important; }
  .main-nav .nav-btn span { font-size: 10.5px !important; }
  .main-nav .nav-btn .nav-icon { font-size: 21px !important; }
  .main-nav .nav-btn.active { color: #ffd700 !important; }
}

/* ===================================================================
   Хаб "Инструменты" на странице "Ссылки"
   =================================================================== */
.tools-hub { margin: 0 0 22px; }

.tools-hub-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: #ffd700; margin: 0 0 12px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.tool-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  background: #0d2038;
  border: 1px solid rgba(255, 215, 0, 0.28);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.tool-card:hover {
  border-color: rgba(255, 215, 0, 0.6);
  background: #123156;
}
.tool-card:active { transform: scale(0.98); opacity: 0.95; }

.tool-card-ic { font-size: 24px; line-height: 1; flex: none; }
.tool-card-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-card-name { font-weight: 700; color: #ffffff; font-size: 14px; }
.tool-card-desc { color: rgba(255, 255, 255, 0.75); font-size: 12px; }