#header {
  display: flex; align-items: center; gap: 12px; padding: 9px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface);
  flex-shrink: 0; flex-wrap: wrap;
}
.header-logo      { font-weight: 700; color: var(--text); font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; }
.header-logo span { color: var(--yellow); }
.hdiv             { width: 1px; height: 14px; background: var(--border3); flex-shrink: 0; }
.header-meta      { font-size: 12px; color: var(--text4); white-space: nowrap; }
.header-meta b    { color: var(--text2); font-weight: 400; }
.header-meta em   { color: var(--accent); font-style: normal; }

#search-input {
  flex: 1; min-width: 180px; max-width: 320px; padding: 6px 12px;
  background: var(--border); border: 1px solid var(--border2); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: 12px; outline: none;
  transition: border-color 0.15s; margin-left: auto;
}
#search-input:focus       { border-color: var(--accent); }
#search-input::placeholder { color: var(--text4); }

.btn-ghost {
  padding: 6px 11px; background: transparent; border: 1px solid var(--border3);
  border-radius: 6px; color: var(--text3); cursor: pointer; font-family: inherit;
  font-size: 12px; transition: all 0.15s; white-space: nowrap;
}
.btn-ghost:hover { color: var(--text); border-color: var(--text2); }