:root{
  --sb-bg: #e9e3df;
  --sb-card: #ffffff;
  --sb-stroke: #e7e1db;
  --sb-text: #4a4a4a;
  --sb-muted: #9a8f86;
  --sb-shadow: 0 10px 25px rgba(0,0,0,.08);
  --sb-radius: 999px;
}

/* topo com a barra */
.sb-wrap{
  background: var(--sb-bg);
  padding: 18px 18px;
}

/* linha: logo + campo */
.sb{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* logo */
.sb-logo{
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  text-decoration: none;
}
.sb-logo img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

/* barra branca */
.sb-form{
  flex: 1;
  height: 54px;
  background: var(--sb-card);
  border: 1px solid var(--sb-stroke);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* input */
.sb-input{
  flex: 1;
  height: 100%;
  border: 0;
  outline: none;
  padding: 0 18px;
  font-size: 16px;
  color: var(--sb-text);
  background: transparent;
}
.sb-input::placeholder{
  color: var(--sb-muted);
}

/* botão lupa */
.sb-btn{
  width: 56px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.sb-btn svg{
  fill: #c7b8ad;
}

/* foco bonito */
.sb-form:focus-within{
  border-color: rgba(199,184,173,.9);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

/* responsivo */
@media (max-width: 560px){
  .sb{ gap: 10px; }
  .sb-logo{ width: 46px; height: 46px; }
  .sb-form{ height: 46px; }
  .sb-input{ font-size: 15px; }
}

.sb-wrap{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

/* animação de giro */
@keyframes logoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.sb-logo.logo-girando img{
  animation: logoSpin 0.6s ease-in-out;
  transform-origin: center;
}

/* ===== FORÇAR COR CLARA DA BARRA (anti-style.css) ===== */

/* fundo da barra sempre claro */
.sb-form{
  background: #ffffff !important;
}

/* input nunca verde */
.sb-input{
  background: transparent !important;
  color: #4a4a4a !important;
}

/* quando clicar */
.sb-input:focus{
  background: transparent !important;
  box-shadow: none !important;
}

/* quando hover */
.sb-form:hover{
  background: #ffffff !important;
}

/* quando tem foco dentro */
.sb-form:focus-within{
  background: #ffffff !important;
  border-color: #e7e1db !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.08) !important;
}