/* ================================================================
   CGWALLS — Header + Stats Bar
   ================================================================ */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px;
  height: 64px;
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,13,.85);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
}

/* ── logo ── */
.logo-area {
  display: flex; align-items: center; gap: 11px;
  flex-shrink: 0; text-decoration: none;
}
.logo-img {
  width: 36px; height: 36px;
  border-radius: var(--r-md); object-fit: cover;
}
.site-name {
  font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: var(--text);
}
.site-name span { color: var(--accent); }

/* ── search ── */
.header-center {
  flex: 1; min-width: 0; max-width: 420px; margin: 0 16px;
}
.search-wrap { position: relative; width: 100%; }

.search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted); pointer-events: none; z-index: 1;
  transition: color var(--tf) var(--ease);
}
.search-wrap:focus-within .search-icon { color: var(--accent); }

.search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--border-hi);
  color: var(--muted); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 1;
  opacity: 0; pointer-events: none;
  transition: opacity var(--tf) var(--ease), background var(--tf) var(--ease), color var(--tf) var(--ease);
}
.search-clear.visible { opacity: 1; pointer-events: all; }
.search-clear:hover   { background: var(--accent-dim); color: var(--accent); }
.search-clear svg     { width: 10px; height: 10px; }

#searchInput {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 10px 40px 10px 42px;
  color: var(--text);
  font-family: 'Syne', sans-serif; font-size: 13px;
  outline: none;
  transition: border-color var(--tf) var(--ease), background var(--tf) var(--ease), box-shadow var(--tf) var(--ease);
}
#searchInput::placeholder { color: var(--muted); font-family: 'Space Mono', monospace; font-size: 11px; }
#searchInput:focus {
  border-color: var(--accent); background: var(--surface2);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── header actions ── */
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.donate-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: var(--r-full); padding: 7px 13px;
  font-size: 11px; font-weight: 700;
  font-family: 'Space Mono', monospace;
  color: var(--text); text-decoration: none; white-space: nowrap;
  transition: background var(--tf) var(--ease), border-color var(--tf) var(--ease),
              color var(--tf) var(--ease), transform var(--tf) var(--ease);
}
.donate-btn:hover {
  transform: translateY(-1px);
  background: rgba(245,166,35,.15); border-color: #f5a623; color: #f5a623;
}
.donate-btn svg { flex-shrink: 0; }

.submit-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--accent); border: none;
  border-radius: var(--r-full); padding: 8px 16px;
  font-size: 11px; font-weight: 700;
  font-family: 'Space Mono', monospace;
  color: #0a0a0d; text-decoration: none; white-space: nowrap;
  transition: background var(--tf) var(--ease), transform var(--tf) var(--ease), box-shadow var(--tf) var(--ease);
}
.submit-btn:hover {
  transform: translateY(-1px);
  background: #eeeeee; box-shadow: var(--accent-glow);
}
.submit-btn svg { flex-shrink: 0; }

/* ── stats bar ── */
.stats-bar {
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 14px 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.stats-bar::-webkit-scrollbar { display: none; }

.stat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 0 36px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.stat-item:last-child { border-right: none; }

.stat-icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--accent-dim);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); flex-shrink: 0;
}
.stat-icon svg { width: 18px; height: 18px; }

.stat-text .stat-num {
  font-size: 22px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.stat-text .stat-label {
  font-size: 11px; color: var(--muted);
  font-family: 'Space Mono', monospace; letter-spacing: .5px; margin-top: 2px;
}

/* ── responsive ── */
@media (max-width: 900px) {
  header { padding: 0 16px; }
  .header-center { max-width: none; margin: 0 10px; }
  .donate-btn .btn-label { display: none; }
  .site-name { font-size: 17px; }
  .stat-item { padding: 0 20px; }
  .stat-text .stat-num { font-size: 18px; }
}
@media (max-width: 500px) {
  .stats-bar { justify-content: flex-start; }
}