.ss-wrap {
  position: relative;
  display: inline-block;
  min-width: 130px;
}
.ss-display {
  padding: .38rem .7rem;
  padding-right: 1.6rem;
  border-radius: 8px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card-bg, #fff);
  font-size: .8rem;
  color: var(--text-color, #111);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
.ss-display:hover {
  border-color: var(--accent, #b91c1c);
}
.ss-arrow {
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .65rem;
  opacity: .5;
  pointer-events: none;
}
.ss-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 260px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 999;
  overflow: hidden;
  flex-direction: column;
}
.ss-wrap.ss-open .ss-dropdown {
  display: flex;
}
.ss-search {
  padding: .45rem .6rem;
  border: none;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: .8rem;
  outline: none;
  background: transparent;
  color: var(--text-color, #111);
}
.ss-search::placeholder {
  color: var(--text-muted, #9ca3af);
}
.ss-list {
  overflow-y: auto;
  max-height: 200px;
}
.ss-item {
  padding: .4rem .65rem;
  font-size: .8rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-item:hover {
  background: var(--hover-bg, #f3f4f6);
}
.ss-item.ss-selected {
  background: var(--accent, #b91c1c);
  color: #fff;
}