/* Top navigation — public marketplace shell. Dark only (the public layout is
 * always html.dark). A floating glass pill: sticky, blurred, indigo-tinted.
 */

.kw-topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 18px var(--kw-space-8);
  width: 100%;
}
/* The glass pill itself, centred to the content width. */
.kw-topnav__inner {
  max-width: var(--kw-width-content);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 10px 8px 18px;
  border-radius: var(--kw-radius-pill);
  background: rgba(77, 96, 251, 0.06);
  border: 1px solid rgba(77, 96, 251, 0.20);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-shadow: inset 0 0 16px rgba(77, 96, 251, 0.18);
}

.kw-topnav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  text-decoration: none;
}
.kw-topnav__brand img { height: 22px; display: block; }
.kw-topnav__brand-text { color: #fff; }
/* "Agent Marketplace" qualifier — mono lavender, divider rule (brand tag). */
.kw-topnav__brand-text--muted {
  font-family: var(--kw-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--kw-muted-lavender);
  padding-inline-start: 10px;
  margin-inline-start: 2px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}
/* Mark used until the white logo asset lands (phase 6). */
.kw-topnav__brand-mark {
  width: 30px; height: 30px;
  border-radius: var(--kw-radius-md);
  background: linear-gradient(135deg, #4D60FB, #8352E8);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kw-topnav__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: 8px;
}
.kw-topnav__link {
  font-family: var(--kw-font-headline);
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--kw-radius-pill);
  text-decoration: none;
  transition: background 150ms;
}
.kw-topnav__link:hover { background: rgba(77, 96, 251, 0.12); }
.kw-topnav__link--active { background: rgba(77, 96, 251, 0.18); }

.kw-topnav__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kw-topnav__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--kw-font-mono);
  font-size: 12px;
  color: var(--kw-muted-lavender);
  padding: 6px 12px;
  border-radius: var(--kw-radius-pill);
  background: rgba(147, 156, 229, 0.10);
  border: 1px solid rgba(77, 96, 251, 0.18);
  text-decoration: none;
}
.kw-topnav__chip--link:hover { color: #fff; background: rgba(77, 96, 251, 0.18); }

.kw-topnav__avatar-form { display: inline-flex; margin: 0; }
.kw-topnav__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--kw-font-headline);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #4D60FB, #8352E8);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.kw-topnav__avatar:hover { filter: brightness(1.12); }