:root { --kz-header: 60px; }
html, body { margin: 0; background: #0c0c0e; }
.kz-bar {
  position: fixed; inset: 0 0 auto 0; height: var(--kz-header); z-index: 100;
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  font: 500 14px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111;
}
.kz-bar svg { width: 28px; height: 28px; display: block; }
.kz-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.kz-name span { color: #777; font-weight: 500; }
.kz-pill { margin-left: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(184,244,106,0.35); color: #121214; font-size: 12px; font-weight: 600; }
.kz-spacer { flex: 1; }
.kz-link { color: #444; text-decoration: none; font-size: 13px; padding: 8px 12px; border-radius: 8px; }
.kz-link:hover { background: rgba(0,0,0,0.04); color: #111; }
.kz-cta { background: #b8f46a; color: #121214; font-weight: 600; }
.kz-cta:hover { background: #a6e85f; color: #121214; }
.kz-name, .kz-link { white-space: nowrap; }
@media (max-width: 640px) {
  .kz-bar { padding: 0 14px; gap: 10px; }
  .kz-link:not(.kz-cta) { display: none; }
}
body.dark-mode, .dark-mode .kz-bar { background: #0c0c0e; }
.dark-mode .kz-bar { background: #0c0c0e; border-bottom-color: rgba(255,255,255,0.08); color: #ececef; }
.dark-mode .kz-name span, .dark-mode .kz-link { color: #a1a1aa; }
.dark-mode .kz-link:hover { background: rgba(255,255,255,0.06); color: #ececef; }
.dark-mode .kz-pill { background: rgba(184,244,106,0.15); color: #b8f46a; }
.dark-mode .kz-cta { background: #b8f46a; color: #121214; }