/* =========================
   Header: Topbar only
   ========================= */

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(11,15,22,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand{display:flex; align-items:center; gap:10px; min-width:220px;}

.brand-title{display:flex; flex-direction:column; line-height:1.1}
.brand-title strong{font-size:14px; letter-spacing:.6px}
.brand-title span{font-size:12px; color:var(--muted2)}

.brand-logo{
  width:34px;
  height:34px;
  border-radius:11px;
  object-fit:contain;
  display:block;
  box-shadow: 0 12px 26px rgba(124,92,255,.25);
}

.search{flex:1; display:flex; gap:10px; align-items:center;}

.searchbox{
  flex:1;
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  transition: border .2s ease, transform .2s ease, background .2s ease;
}
.searchbox:focus-within{
  border-color: rgba(124,92,255,.45);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.searchbox svg{opacity:.75}
.searchbox input{
  width:100%;
  background: transparent;
  border:0;
  outline:none;
  color: var(--text);
  font-size:14px;
}
.searchbox input::placeholder{color:rgba(167,179,200,.65)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; height:42px; padding:0 14px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color: var(--text);
  cursor:pointer;
  transition: transform .15s ease, border .15s ease;
  user-select:none;
  white-space:nowrap;
  font-size:13px;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(124,92,255,.38)}
.btn.primary{
  border: 1px solid rgba(124,92,255,.45);
  background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(53,208,255,.18));
  box-shadow: 0 14px 34px rgba(124,92,255,.18);
}

.tabs{display:flex; gap:8px; align-items:center; margin-left:auto;}
.pill{
  font-size:12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,.03);
}
.pill.active{
  color: var(--text);
  border-color: rgba(124,92,255,.45);
  background: rgba(124,92,255,.18);
}

/* topbarのレスポンシブだけ（tagbarには触れない） */
@media (max-width: 720px){
  .topbar-inner{flex-wrap:wrap}
  .search{width:100%}
  .tabs{width:100%; justify-content:flex-start}
}
@media (max-width: 720px){

  /* flex-wrapより縦積みの方が綺麗に揃う */
  .topbar-inner{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 0;
  }

  /* ブランドは横幅に追従（min-widthが効いて窮屈になるのを防ぐ） */
  .brand{
    min-width: 0;
  }

  /* 検索は1行で “入力 + 検索ボタン” を綺麗に */
  .search{
    width: 100%;
    gap: 10px;
  }

  .searchbox{
    flex: 1;
    min-width: 0; /* これがないと稀に横がはみ出す */
  }

  .btn.primary{
    flex: 0 0 auto;
    height: 42px;
    padding: 0 14px;
  }

  /* タブ（サイトランキング）は検索の下で “横いっぱいボタン” に */
  .tabs{
    width: 100%;
    margin-left: 0;           /* desktop用のautoを打ち消し */
    justify-content: stretch; /* 1個でも横いっぱい */
  }

  .pill{
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    font-size: 13px;
  }
}