.combo { position: relative; min-width: 0; }
.combo:focus-within { z-index: 45; }
.combo:has(.combo__clear[hidden])::after { content: "⌄"; position: absolute; right: 12px; top: 9px; color: var(--text-soft); pointer-events: none; }
.combo__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.combo__input { width: 100%; padding-right: 34px; }
.combo__clear { position: absolute; top: 5px; right: 5px; padding: 4px 8px; border: 0; background: transparent; cursor: pointer; color: var(--text-soft); border-radius: 6px; }
.combo__clear:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.combo__menu { position: fixed; z-index: 100; max-height: 280px; overflow-y: auto; padding: 6px; background: var(--surface, #fff); color: var(--text, #172033); border: 1px solid var(--border, #d5dbe5); border-radius: 10px; box-shadow: 0 10px 28px #0002; }
.combo__menu[hidden], .combo__create[hidden], .combo__clear[hidden] { display: none; }
.combo__option, .combo__create { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; padding: 10px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
.combo__option:hover, .combo__option:focus-visible { background: var(--surface-3); color: var(--text); }
.combo__option[aria-selected="true"], .combo__option[aria-selected="true"]:hover { background: var(--brand-700); color: #fff; }
.combo__create { margin-top: 4px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 600; }
.combo__create:hover, .combo__create:focus-visible { background: var(--brand-700); color: #fff; }
.combo__option:focus-visible, .combo__create:focus-visible, .combo__clear:focus-visible { outline: 2px solid var(--brand-400); outline-offset: -2px; }
.combo__status { display: block; padding: 8px; font-size: 12px; color: var(--text-soft); overflow-wrap: anywhere; }
.combo__input:disabled { opacity: .6; cursor: not-allowed; }
.combo-dialog { width: min(520px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; padding: 24px; border: 1px solid var(--border, #d5dbe5); border-radius: 14px; background: var(--surface, #fff); color: var(--text, #172033); }
.combo-dialog::backdrop { background: #0007; }
.combo-dialog__form { display: grid; gap: 14px; }
.combo-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }
.combo-dialog__error { color: var(--danger, #b42318); white-space: pre-line; }