.ss-box { position: relative; max-width: 640px; margin: 0 auto; font-family: inherit; }
.ss-input { width: 100%; box-sizing: border-box; padding: 14px 18px; font-size: 16px; color: #000; background: #fff;
  border: 2px solid #000; border-radius: 0; outline: none; -webkit-appearance: none; }
.ss-input:focus { border-color: #e11d2e; }
.ss-drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 9999; background: #fff; color: #000;
  border: 2px solid #000; border-top: 0; max-height: 70vh; overflow-y: auto; }
.ss-item { display: flex; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid #eee; }
.ss-item:hover, .ss-item.on { background: #f5f5f5; }
.ss-item img { width: 56px; height: 56px; object-fit: cover; flex: none; }
.ss-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-txt strong { font-size: 15px; line-height: 1.25; }
.ss-txt small { font-size: 13px; color: #555; line-height: 1.35; }
.ss-txt em { font-size: 11px; font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: #e11d2e; }
.ss-txt mark { background: none; color: #e11d2e; font-weight: 600; }
.ss-all, .ss-empty { display: block; padding: 12px 14px; font-size: 13px; text-decoration: none; color: #000; font-weight: 600; }
.ss-all:hover { color: #e11d2e; }
@media (prefers-color-scheme: dark) {
  .ss-input, .ss-drop { background: #000; color: #fff; border-color: #fff; }
  .ss-item { border-color: #222; } .ss-item:hover, .ss-item.on { background: #111; }
  .ss-txt small { color: #aaa; } .ss-all, .ss-empty { color: #fff; }
}