:root {
  --qi-z: 10000;
  --qi-radius: 12px;
  --qi-shadow: 0 12px 40px rgba(2, 6, 23, .6);
  --qi-border: 1px solid rgba(148, 163, 184, .25);
  --qi-maxh: 320px;
  --qi-gap: 8px;
  --qi-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --qi-bg: #0f172a;
  --qi-bg-hover: #111827;
  --qi-text: #e5e7eb;
  --qi-muted: #9ca3af;
  --qi-accent: #22C55E;
  --qi-input-bg: #0b1324;
  --qi-input-border: #334155;
}


.qi-chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; background:#fff; border:var(--qi-border);
  box-shadow: var(--qi-shadow); cursor:pointer; font:600 13px/1 var(--qi-font);
  margin-top:6px; margin-left:6px;
}
.qi-chip svg{ width:16px; height:16px; }


.qi-panel {
  position: fixed;
  z-index: var(--qi-z);
  background: var(--qi-bg);
  color: var(--qi-text);
  border: var(--qi-border);
  border-radius: var(--qi-radius);
  box-shadow: var(--qi-shadow);
  width: 420px;
  max-width: 94vw;
  max-height: var(--qi-maxh);
  overflow: auto;
  display: none;
}

.qi-panel.open { display:block; }

.qi-head { display:flex; align-items:center; gap:8px; padding:10px 10px 0 10px; }
.qi-kb { margin-left:auto; font-size:12px; color:#6b7280; }

.qi-search {
  margin: 8px 10px 6px 10px;
  width: calc(100% - 20px);
  border: 1px solid var(--qi-input-border);
  border-radius: 10px;
  padding: 8px 10px;
  outline: none;
  background: var(--qi-input-bg);
  color: var(--qi-text);
}
.qi-search::placeholder { color: var(--qi-muted); }
.qi-search:focus { border-color: var(--qi-accent); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }

.qi-search:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }

.qi-list { list-style:none; margin:0; padding: 4px 0; }

.qi-item {
  padding: 10px 12px;
  border-bottom: 1px dashed rgba(148,163,184,.12);
  cursor: pointer;
  color: var(--qi-text);
}
.qi-item:hover { background: var(--qi-bg-hover); }

.qi-item:hover { background:#f8fafc; }

.qi-empty { padding: 12px; color: var(--qi-muted); font-size: 13px; }