/* qe-framework.css — part of Createrus (new, split file — feature: Framework Picker)
   Dropdown ringkas (bukan modal) — daftar 12 nama framework saja, tanpa deskripsi,
   karena penjelasan lengkap tiap framework sudah tersedia di panel referensi/Beranda.
   Dibuat sengaja compact & pendek (bukan modal lebar) sesuai revisi.
*/

#qe-fw-dropdown {
  position: fixed;
  z-index: 100020;
  width: 148px;
  max-height: 216px; /* ~4.5 item terlihat, sisanya scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  border-radius: var(--r12);
  box-shadow: var(--shadow-modal, 0 12px 32px rgba(0,0,0,.28));
  padding: 5px;
  box-sizing: border-box;
}

.qe-fw-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 7px;
  border: none;
  background: transparent;
  border-radius: var(--r8);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: background var(--dur-fast);
}

.qe-fw-item:hover,
.qe-fw-item:focus-visible {
  background: var(--bg3);
  outline: none;
}

.qe-fw-item:active { background: var(--bg4); }

.qe-fw-item-badge {
  flex-shrink: 0;
  width: 30px;
  text-align: center;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--txt3);
  background: var(--tint-05);
  border-radius: 5px;
  padding: 2.5px 0;
}

html.dark .qe-fw-item-badge { background: rgba(255,255,255,.08); }

.qe-fw-item-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
}