/* assets/hero_toolbar.css — красивая панель поиска/фильтра */
:root{
  --bg:#000; --fg:#fff; --muted:#bdbdbd; --line:#1c1c1c;
  --glass: rgba(255,255,255,.06);
  --glow: #00f2ff;
  --radius: 16px;
}
.hero-toolbar{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 10px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06)}
.hero-toolbar form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-input{flex:1 1 280px;display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:10px 14px}
.hero-input input{background:transparent;border:0;color:var(--fg);outline:none;width:100%;font-size:16px}
.hero-input svg{opacity:.8}
.hero-select, .hero-tag{display:flex;align-items:center;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:10px 14px;color:var(--fg)}
.hero-select select, .hero-tag input{background:transparent;border:0;color:var(--fg);outline:none;font-size:14px}
.hero-btn{padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:#0f0f0f;color:#fff;font-weight:800;letter-spacing:.2px;box-shadow:0 0 14px var(--glow) inset, 0 0 14px var(--glow);transition:transform .08s ease}
.hero-btn:active{transform:translateY(1px)}
.hero-toolbar .chipset{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{border:1px solid var(--line);background:#0c0c0c;border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted)}
@media (max-width:560px){
  .hero-input{flex:1 1 100%}
  .hero-select{flex:1 1 48%}
  .hero-tag{flex:1 1 100%}
  .hero-btn{flex:1 1 100%;text-align:center}
}