/* ===== ОСНОВНОЙ ФОН (Атмосферный пейзаж) ===== */
#page_wrapper,
#page_container {
  background-image: url('https://staticonline.duckdns.org/api/public/dl/EuNRx5qF?inline=true') !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  position: relative !important; /* Важно для корректной работы z-index */
}

/* ===== УМНОЕ ЗАТЕМНЕНИЕ ФОНА ===== */
#page_wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Градиент: сверху плотное затемнение (чтобы читались заголовки), 
     снизу легкое, чтобы облака просвечивали, но не слепили */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.50) 40%,
    rgba(0, 0, 0, 0.75) 100%
  ) !important;
  z-index: 0 !important;
  pointer-events: none !important; /* Защита от блокировки кликов */
}

/* ===== КАРТОЧКИ СЕРВИСОВ (Эффект матового стекла) ===== */
.service-card,
.bookmark-card,
li.bookmark a {
  /* Сделал фон чуть плотнее и добавил стеклянный блеск */
  background: rgba(15, 20, 30, 0.65) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative;
  z-index: 1 !important; /* Поверх затемнения */
}

/* ===== ХОВЕР-ЭФФЕКТ (Стильный фиолетовый акцент) ===== */
.service-card:hover,
.bookmark-card:hover,
li.bookmark a:hover {
  background: rgba(25, 35, 55, 0.85) !important;
  /* Легкое свечение по краям */
  border-color: rgba(139, 92, 246, 0.4) !important; /* Фиолетовый цвет */
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 
              0 0 20px rgba(139, 92, 246, 0.2) !important;
  transform: translateY(-3px) scale(1.01) !important;
}

/* ===== ЗАГОЛОВКИ ГРУПП (Cloud, Communication...) ===== */
.service-group-name,
.bookmark-group-name,
h2 {
  color: #f0f0f5 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  /* Усиленная тень для читаемости на любом фоне */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
  position: relative;
  z-index: 1 !important;
}

/* ===== ТЕКСТ ВНУТРИ КАРТОЧЕК ===== */
.service-name,
.bookmark-name {
  color: #ffffff !important;
  font-weight: 500;
}

.service-description {
  color: #9ca3af !important;
  opacity: 0.9;
}

/* ===== ПОИСКОВАЯ СТРОКА ===== */
#search-input,
input[type="search"],
.search-input {
  background: rgba(15, 20, 30, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  color: #f3f4f6 !important;
  padding: 12px 18px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  outline: none !important;
  transition: 0.2s ease !important;
  z-index: 1 !important;
  position: relative;
}

#search-input:focus {
  border-color: rgba(139, 92, 246, 0.5) !important; /* Фиолетовый при фокусе */
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

#search-input::placeholder {
  color: #9ca3af !important;
}

/* ===== ВИДЖЕТЫ / ДАТА ===== */
#information-widgets,
.information-widget {
  background: rgba(15, 20, 30, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  color: #e5e7eb !important;
  padding: 12px 16px !important;
  z-index: 1 !important;
  position: relative;
}

/* ===== ИКОНКИ ===== */
.service-icon,
.bookmark-icon {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)) !important;
}

/* ===== БАЗОВЫЙ ТЕМНЫЙ КОНТЕКСТ ===== */
:root {
  --color-900: 15 20 30;
}