.hdr{
  position:sticky;
  top:0;
  z-index:300;
  min-height:var(--header-h);
  padding:12px 16px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(28px) saturate(200%);
  border-bottom:1px solid var(--border);
  animation:hdrIn .5s var(--ease) both;
}

.hdr-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
  width:100%;
}

.logo{
  display:inline-flex;
  align-items:center;
  min-width:0;
  order:1;
}

.brand-pill{
  display:inline-flex;
  align-items:center;
  min-width:0;
  border-radius:999px;
  padding:9px 14px 9px 12px;
}

.hdr-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  margin-left:auto;
  order:2;
  position:relative;
}

.search-wrap{
  display:flex;
  justify-content:center;
  width:100%;
  min-width:0;
  order:3;
  margin-top:10px;
  position:relative;
}

.search-form{
  display:flex;
  align-items:center;
  width:100%;
  max-width:none;
  min-width:0;
  border-radius:999px;
}

.search-input{
  min-width:0;
  padding:12px 16px;
  font-size:14px;
}

.search-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin:4px;
  flex-shrink:0;
}

.theme-btn,
.soc-circle,
.btn-pub,
.menu-btn{
  min-width:40px;
  min-height:40px;
}

.menu-btn,
.mobile-menu{
  display:none;
}

.menu-btn{
  position:relative;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:var(--surface);
  color:var(--text2);
  transition:all .2s var(--ease);
  flex-shrink:0;
}

.menu-btn:hover{
  border-color:var(--blue);
  background:var(--blue-soft);
  color:var(--blue);
}

.menu-btn span{
  position:absolute;
  width:16px;
  height:1.8px;
  border-radius:999px;
  background:currentColor;
  transition:transform .22s var(--ease),opacity .18s var(--ease);
}

.menu-btn span:nth-child(1){transform:translateY(-5px)}
.menu-btn span:nth-child(2){transform:translateY(0)}
.menu-btn span:nth-child(3){transform:translateY(5px)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

.mobile-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(280px,calc(100vw - 32px));
  padding:10px;
  border:1px solid var(--border);
  border-radius:20px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(24px) saturate(180%);
  flex-direction:column;
  gap:8px;
  z-index:600;
}

.mobile-menu[hidden]{
  display:none !important;
}

.mobile-menu.is-open{
  display:flex;
}

.mobile-menu-link,
.mobile-menu-pub{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
  padding:12px 14px;
  border-radius:16px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  background:var(--surface2);
  border:1px solid var(--border2);
}

.mobile-menu-link:hover,
.mobile-menu-pub:hover{
  background:var(--blue-soft);
  color:var(--blue);
  border-color:rgba(37,99,235,.18);
}

.mobile-menu-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#fff;
}

.mobile-menu-pub{
  background:var(--blue);
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(37,99,235,.2);
}

.mobile-menu-pub:hover{
  background:var(--blue-dark);
  color:#fff;
  border-color:transparent;
}

@media (max-width: 768px){
  .soc-circle,
  .btn-pub{
    display:none;
  }

  .menu-btn{
    display:flex;
  }
}

@media (min-width: 769px){
  .hdr{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 32px;
  }

  .hdr-top{
    display:contents;
  }

  .logo{
    order:1;
    flex:0 0 auto;
  }

  .brand-pill{
    padding:9px 18px 9px 14px;
  }

  .search-wrap{
    order:2;
    flex:1 1 auto;
    max-width:520px;
    width:auto;
    margin:0 auto;
  }

  .search-form{
    max-width:520px;
  }

  .search-input{
    padding:11px 20px;
  }

  .search-btn{
    width:40px;
    height:40px;
    margin:4px;
  }

  .hdr-right{
    order:3;
    flex:0 0 auto;
    display:flex;
    gap:8px;
    margin-left:0;
  }
}

@media (min-width: 769px) and (max-width: 1180px){
  .hdr{
    padding:0 24px;
  }

  .search-wrap{
    max-width:460px;
  }

  .search-form{
    max-width:460px;
  }
}

@media (max-width: 420px){
  .brand-pill{
    padding:8px 12px 8px 11px;
  }

  .brand-pill-text{
    font-size:14px;
  }
}