/* ============ HOMPLEX CSS v7 ============ */

/* --- 1. ЛОГОТИП ГЛАВНАЯ: бокс с точной пропорцией 400:86, обрез невозможен --- */
.index .title{
  background-image:url('/static/themes/simple/img/searxng.png?v=3')!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:100% auto!important;
  width:300px!important;max-width:90vw!important;
  height:65px!important;min-height:0!important;
  margin:3rem auto!important;
}
.index .title h1{display:none!important;}

/* --- 2. ЛОГОТИП PREFERENCES --- */
.page_with_header .logo{width:200px!important;max-width:200px!important;height:auto!important;}

/* --- 3. ИНВЕРСИЯ В ТЁМНОЙ ТЕМЕ --- */
html.theme-dark .index .title,html.theme-black .index .title,
html.theme-dark .page_with_header .logo,html.theme-black .page_with_header .logo{filter:brightness(0) invert(1)!important;}
@media (prefers-color-scheme: dark){
  html.theme-auto .index .title,html.theme-auto .page_with_header .logo{filter:brightness(0) invert(1)!important;}
}

/* --- 4. ШЕСТЕРЁНКА (рабочая версия, не трогаем логику) --- */
#homplex_gear_btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:.8rem!important;color:var(--color-search-font)!important;text-decoration:none!important;background:transparent!important;border-radius:0!important;transition:color .15s ease;}
#homplex_gear_btn:hover{color:var(--color-search-background-hover)!important;}

/* --- 5. WAFFLE-МЕНЮ: контейнер и кнопка --- */
.homplex-waffle-wrapper{position:fixed!important;top:1.5rem!important;right:1.5rem!important;z-index:9999!important;}
.homplex-waffle-btn{width:40px!important;height:40px!important;border-radius:50%!important;background:var(--color-base-background)!important;border:1px solid var(--color-header-border)!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--color-base-font)!important;padding:0!important;transition:background .15s ease!important;}
.homplex-waffle-btn:hover{background:var(--color-settings-table-group-background)!important;}
.homplex-waffle-btn svg{width:20px!important;height:20px!important;fill:currentColor!important;}

/* --- 6. Выпадающая панель --- */
.homplex-dropdown-menu{display:none;position:absolute!important;top:48px!important;right:0!important;background:var(--color-base-background)!important;border:1px solid var(--color-header-border)!important;border-radius:12px!important;padding:16px!important;min-width:280px!important;box-shadow:0 4px 24px rgba(0,0,0,.12)!important;z-index:10000!important;}
.homplex-dropdown-header{text-align:center!important;font-weight:600!important;font-size:13px!important;color:var(--color-base-font)!important;margin-bottom:14px!important;padding-bottom:10px!important;border-bottom:1px solid var(--color-header-border)!important;letter-spacing:.02em;}
.homplex-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;}
.homplex-item{display:flex!important;flex-direction:column!important;align-items:center!important;text-decoration:none!important;color:var(--color-base-font)!important;padding:8px 4px!important;border-radius:8px!important;transition:background .15s ease!important;}
.homplex-item:hover{background:var(--color-settings-table-group-background)!important;}
.homplex-label{font-size:11px!important;text-align:center!important;color:var(--color-base-font)!important;line-height:1.2!important;}

/* --- 7. БЕЙДЖИ: видимые в обеих темах + fill:currentColor (главный фикс иконок) --- */
.homplex-icon-badge{width:40px!important;height:40px!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important;margin-bottom:6px!important;background:rgba(17,19,24,.06)!important;color:#111318!important;position:relative;}
.homplex-icon-badge svg{width:20px!important;height:20px!important;fill:currentColor!important;}
html.theme-dark .homplex-icon-badge,html.theme-black .homplex-icon-badge{background:rgba(255,255,255,.14)!important;color:#f5f6f7!important;}
@media (prefers-color-scheme: dark){
  html.theme-auto .homplex-icon-badge{background:rgba(255,255,255,.14)!important;color:#f5f6f7!important;}
}

/* --- 8. МЕДИА: иконка-видеокамера вместо текущей (только для media.homplex.org) --- */
.homplex-item[href="https://media.homplex.org"] .homplex-icon-badge svg{visibility:hidden!important;}
.homplex-item[href="https://media.homplex.org"] .homplex-icon-badge::after{
  content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;transform:translate(-50%,-50%);
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/></svg>") center/contain no-repeat;
}

/* --- 9. КНОПКА "ВОЙТИ В ХАБ": строгий контур вместо синей полосы --- */
.homplex-dropdown-menu a[style*="1a73e8"]{background:transparent!important;color:var(--color-base-font)!important;border:1px solid var(--color-base-font)!important;border-radius:8px!important;font-weight:600!important;letter-spacing:.02em!important;transition:all .15s ease!important;}
.homplex-dropdown-menu a[style*="1a73e8"]:hover{background:var(--color-base-font)!important;color:var(--color-base-background)!important;}

/* --- 10. СКРЫТИЕ СЛУЖЕБНОГО --- */
nav#links_on_top{display:none!important;}
footer{display:none!important;}

/* --- ЛОГОТИП НА ГЛАВНОЙ (через JS) --- */
  display:block;
  margin:4rem auto 1.2rem;
  width:300px;
  max-width:90vw;
  height:auto;
  object-fit:contain;
}
  filter:brightness(0) invert(1)!important;
}
@media (prefers-color-scheme: dark){
    filter:brightness(0) invert(1)!important;
  }
}


/* === ФИНАЛЬНЫЙ ЛОГОТИП (aspect-ratio + 100% 100%) === */
body.index_endpoint .index .title{
  background:url('/static/themes/simple/img/searxng.png?v=11') center center / 100% 100% no-repeat !important;
  width:400px !important;
  max-width:90vw !important;
  aspect-ratio:400 / 86 !important;
  height:auto !important;
  min-height:0 !important;
  margin:4rem auto 1.2rem !important;
  padding:0 !important;
}
body.index_endpoint .index .title h1{display:none !important;}
html.theme-dark body.index_endpoint .index .title,
html.theme-black body.index_endpoint .index .title{
  filter:brightness(0) invert(1) !important;
}
@media (prefers-color-scheme: dark){
  html.theme-auto body.index_endpoint .index .title{
    filter:brightness(0) invert(1) !important;
  }
}

/* === АГРЕССИВНОЕ ПЕРЕБИТИЕ (если aspect-ratio не сработал) === */
body.index_endpoint .index .title{
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}