/* 首頁「兩下選產品」小工具（assets/selector/quickpick.js） */
#np-qp { --qp-accent: #185fa5; --qp-accent-soft: #e6f0fa; --qp-ink: #13222b; --qp-muted: #5f6b76; --qp-line: #d9e2ec;
  background: #fff; border: 1px solid var(--qp-line); border-radius: 18px; padding: 28px; margin: 0 0 40px; box-shadow: 0 8px 30px rgba(15, 35, 64, .06); }
#np-qp * { box-sizing: border-box; }
#np-qp h3 { font-size: 22px; font-weight: 700; color: var(--qp-ink); margin: 0 0 4px; text-transform: none; }
#np-qp .qp-sub { color: var(--qp-muted); margin: 0 0 20px; font-size: 15px; }
#np-qp .qp-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--qp-accent); margin: 0 0 10px; }
#np-qp .qp-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 22px; }
#np-qp .qp-app { display: grid; justify-items: center; gap: 6px; padding: 16px 10px; border: 1px solid var(--qp-line); border-radius: 12px; background: #f7fafd;
  cursor: pointer; font: inherit; color: var(--qp-ink); text-align: center; transition: border-color .15s, background .15s; }
#np-qp .qp-app i { font-size: 30px; color: var(--qp-accent); }
#np-qp .qp-app span { font-size: 14px; font-weight: 600; line-height: 1.3; }
#np-qp .qp-app:hover { border-color: var(--qp-accent); }
#np-qp .qp-app[aria-pressed="true"] { border-color: var(--qp-accent); background: var(--qp-accent-soft); box-shadow: inset 0 0 0 1px var(--qp-accent); }
#np-qp .qp-accs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
#np-qp .qp-acc { border: 1px solid var(--qp-line); border-radius: 999px; padding: 10px 18px; background: #f7fafd; cursor: pointer; font: inherit; font-size: 15px; color: var(--qp-ink); }
#np-qp .qp-acc small { color: var(--qp-muted); margin-left: 6px; }
#np-qp .qp-acc:hover { border-color: var(--qp-accent); }
#np-qp .qp-acc[aria-pressed="true"] { border-color: var(--qp-accent); background: var(--qp-accent-soft); box-shadow: inset 0 0 0 1px var(--qp-accent); }
#np-qp .qp-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
#np-qp .qp-card { border: 1px solid var(--qp-line); border-radius: 14px; padding: 16px; display: grid; gap: 10px; align-content: start; background: #fff; }
#np-qp .qp-card.top { border-color: var(--qp-accent); box-shadow: 0 0 0 1px var(--qp-accent); }
#np-qp .qp-card-top { display: flex; gap: 14px; align-items: center; }
#np-qp .qp-img { width: 76px; height: 76px; flex: none; border-radius: 10px; background: #f3f6f9; display: grid; place-items: center; overflow: hidden; }
#np-qp .qp-img img { max-width: 90%; max-height: 90%; object-fit: contain; }
#np-qp .qp-type { font-size: 12px; font-weight: 700; color: var(--qp-accent); text-transform: uppercase; letter-spacing: .04em; }
#np-qp .qp-model { font-size: 20px; font-weight: 700; color: var(--qp-ink); margin: 2px 0 0; }
#np-qp .qp-spec { font-size: 14px; color: var(--qp-muted); margin: 0; line-height: 1.5; }
#np-qp .qp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
#np-qp .qp-btn { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--qp-accent); color: var(--qp-accent); background: #fff; }
#np-qp .qp-btn.primary { background: var(--qp-accent); color: #fff; }
#np-qp .qp-btn:hover { filter: brightness(1.08); }
#np-qp .qp-more { margin: 16px 0 0; font-size: 15px; }
#np-qp .qp-more a { font-weight: 600; color: var(--qp-accent); }
#np-qp .qp-none { color: var(--qp-muted); margin: 0; }
@media (max-width: 600px) {
  #np-qp { padding: 20px 16px; }
  #np-qp .qp-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}