.cp-select{position:relative;width:100%;text-align:left}
.cp-select-button{width:100%;display:flex;align-items:center;gap:10px;font:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;color:var(--ink);background:var(--soft);cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}
.cp-select-button:hover{background:var(--card)}
.cp-select-button:focus-visible,.cp-select.open .cp-select-button{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.cp-value{flex:1;text-align:left}
.ci-field .cp-select svg{position:static;transform:none;width:17px;height:17px;display:block;color:inherit}
.cp-option-icon{flex:none;color:var(--muted)}
.cp-chevron{color:var(--muted);display:flex;align-items:center;transform:rotate(0deg);transform-origin:center;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.cp-select.open .cp-chevron{transform:rotate(180deg)}
.cp-select-list{position:absolute;bottom:calc(100% + 8px);left:0;right:0;padding:5px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:0 12px 35px rgba(15,23,42,.14);z-index:20;opacity:0;visibility:hidden;transform:translateY(18px);transform-origin:bottom center;transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1),visibility 0s linear .45s;pointer-events:none}
.cp-select.open .cp-select-list{opacity:1;visibility:visible;transform:translateY(0);visibility:visible;transition-delay:0s;pointer-events:auto}
.cp-option{width:100%;display:flex;align-items:center;gap:10px;border:0;border-radius:9px;padding:10px;font:inherit;font-size:13px;text-align:left;color:var(--ink);background:transparent;cursor:pointer;transition:background .15s,color .15s}
.cp-option:hover{background:color-mix(in srgb,var(--accent) 9%,var(--card))}
.cp-option:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cp-option[aria-selected=true]{background:color-mix(in srgb,var(--accent) 9%,var(--card));color:var(--accent)}
.cp-option[aria-selected=true] .cp-option-icon{color:var(--accent)}
.cp-option-check{margin-left:auto;opacity:0;color:var(--accent)}
.cp-option[aria-selected=true] .cp-option-check{opacity:1}


.cp-select-list:has(.cp-option:hover) .cp-option[aria-selected=true]:not(:hover){background:transparent}
.cp-option[aria-selected=true]:hover{background:color-mix(in srgb,var(--accent) 14%,var(--card))}

.cp-select-button, .cp-select-button:hover, .cp-select-button:focus-visible, .cp-select.open .cp-select-button { background: transparent; }

.cp-select-button{min-height:44px;line-height:20px;transform:none}
.cp-select-button > .cp-option-icon,.cp-chevron,.cp-option-check{display:flex;align-items:center;justify-content:center;width:17px;height:17px;flex:0 0 17px}
.ci-field .cp-select svg{left:auto;top:auto;bottom:auto;right:auto;flex:none}
.cp-chevron{transform-origin:50% 50%}

.cp-select-button{height:44px;min-height:44px;padding-top:11px;padding-bottom:11px}
.cp-select-button .cp-value{display:block;min-width:0;height:20px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:none}
.cp-option{height:40px;line-height:20px;white-space:nowrap}
.cp-option > span:nth-child(2){display:block;min-width:0;line-height:20px;white-space:nowrap}