.qx-reference-popover {
  position: fixed;
  z-index: 11000;
  width: min(320px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid #ffffff1e;
  border-radius: 16px;
  background: #232323;
  color: #f4f4f2;
  box-shadow: 0 18px 54px #0009;
  font: 14px/1.4 system-ui, sans-serif;
}
.qx-reference-popover button,
.qx-reference-popover input { font: inherit; }
.qx-reference-popover [role="menu"] { display: grid; gap: 2px; }
.qx-reference-popover [role="menuitem"] {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.qx-reference-popover [role="menuitem"]:hover,
.qx-reference-popover [role="menuitem"]:focus-visible,
.qx-reference-option:hover,
.qx-reference-option:focus-visible { background: #ffffff1b; outline: none; }
.qx-reference-picker { display: grid; gap: 10px; }
.qx-reference-picker header { display: flex; justify-content: space-between; align-items: center; padding: 2px 5px; }
.qx-reference-picker header button { border: 0; background: transparent; color: inherit; font-size: 22px; cursor: pointer; }
.qx-reference-picker input[type="search"] {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid #ffffff29; border-radius: 9px;
  background: #151515; color: #fff; outline: none;
}
.qx-reference-picker input[type="search"]:focus { border-color: #f89a60; }
.qx-reference-list { max-height: min(310px, 40vh); overflow: auto; display: grid; gap: 3px; }
.qx-reference-list p { margin: 12px 6px; color: #c8c8c8; }
.qx-reference-option {
  display: flex; gap: 10px; align-items: center; width: 100%; min-height: 50px;
  padding: 5px 8px; border: 0; border-radius: 9px; background: transparent;
  color: inherit; text-align: left; cursor: pointer;
}
.qx-reference-option img, .qx-reference-type {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 7px; object-fit: cover;
  background: #333; color: #ddd;
}
.qx-reference-type { display: grid; place-items: center; font-size: 11px; }
.qx-reference-option span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.light .qx-reference-popover { background: #fbfaf7; color: #252525; border-color: #0002; box-shadow: 0 18px 54px #0003; }
body.light .qx-reference-popover [role="menuitem"]:hover,
body.light .qx-reference-option:hover { background: #0000000e; }
body.light .qx-reference-picker input[type="search"] { background: white; color: #252525; border-color: #0003; }
@media (max-width: 600px) {
  .qx-reference-popover { max-height: 60vh; }
  .qx-reference-popover [role="menuitem"] { min-height: 50px; }
}