.hlc-nm { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.hlc-nm * { box-sizing: border-box; }
.hlc-nm-top { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom: 10px; }
.hlc-nm-top label { font-size: 12px; color:#444; display:flex; flex-direction:column; gap:6px; }
.hlc-nm-top select, .hlc-nm-top input, .hlc-nm-top button {
  padding: 8px 10px; border: 1px solid #ddd; border-radius: 10px; font-size: 14px;
}
.hlc-nm-top button { cursor:pointer; }
.hlc-nm-hint { font-size: 12px; color:#666; margin: 6px 0 12px; }

.hlc-nm-layout { display:flex; gap:16px; align-items:flex-start; }
.hlc-nm-panel { border:1px solid #ddd; border-radius: 12px; padding: 12px; background:#fff; min-width:0; }
.hlc-nm-panel.result { flex: 0 0 360px; max-width: 360px; }
.hlc-nm-panel.list { flex: 1 1 auto; }

.hlc-nm-swatch { width: 100%; height: 52px; border-radius: 12px; border:1px solid rgba(0,0,0,0.12); }
.hlc-nm-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }
.hlc-nm-badge { display:inline-block; padding: 2px 10px; border-radius: 999px; border:1px solid #ddd; font-size: 12px; background:#fff; }
.hlc-nm-kv { display:grid; grid-template-columns: 120px 1fr; gap: 6px 10px; margin-top: 10px; font-size: 13px; }
.hlc-nm-kv div { font-variant-numeric: tabular-nums; }

.hlc-nm-tableWrap { max-height: 70vh; overflow:auto; }
.hlc-nm-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.hlc-nm-table th, .hlc-nm-table td { border-bottom: 1px solid #eee; padding: 6px 8px; text-align:left; white-space:nowrap; }
.hlc-nm-table tr:hover { background:#fafafa; cursor:pointer; }

.hlc-nm-small { font-size: 11px; color:#666; margin-top: 10px; }

@media (max-width: 900px) {
  .hlc-nm-layout { flex-direction: column; }
  .hlc-nm-panel.result { flex: 1 1 auto; max-width: none; }
}