.cb { position: relative; min-width: 0; width: 100%; }
.cb-trigger { display: flex; align-items: center; gap: var(--s2, 8px); text-align: left; cursor: pointer; padding-right: var(--s2, 8px); background: var(--surface); }
.cb-trigger:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.cb.open .cb-trigger { border-color: var(--accent); }
.cb-trigger[disabled] { cursor: not-allowed; opacity: .6; }
.cb-value { flex: 1; min-width: 0; display: flex; align-items: center; }
.cb-value-main { display: flex; align-items: baseline; gap: var(--s2, 8px); min-width: 0; }
.cb-value-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cb-value-meta { color: var(--muted); font-size: .82em; white-space: nowrap; flex: none; }
.cb-placeholder { color: var(--faint, var(--muted)); }
.cb-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cb-chev { color: var(--muted); transition: transform var(--dur, .15s); }
.cb.open .cb-chev { transform: rotate(180deg); }

.cb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint, var(--muted)); }
.cb-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.cb-dot.off { background: var(--faint, var(--muted)); opacity: .7; }
.cb-dot.warn { background: var(--warn); }
.cb-dot.bad { background: var(--danger); }


.cb-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 100%; width: max(100%, 340px); max-width: min(480px, calc(100vw - 24px));
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-ctl, 10px);
  box-shadow: var(--shadow, 0 14px 40px rgba(0, 0, 0, .4)); overflow: hidden; }
.cb-panel.up { top: auto; bottom: calc(100% + 4px); }
.cb-panel.right { left: auto; right: 0; }
@media (prefers-reduced-motion: no-preference) { .cb-panel:not([hidden]) { animation: cb-in var(--dur, .15s) ease-out; } @keyframes cb-in { from { opacity: 0; transform: translateY(-3px); } } }
.cb-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2, 8px); padding: var(--s3, 12px) var(--s3, 12px) 0 var(--s4, 16px); }
.cb-search-box { position: relative; padding: var(--s2, 8px); border-bottom: 1px solid var(--border); }
.cb-search-box .cb-search-ico { position: absolute; left: calc(var(--s2, 8px) + 10px); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cb-search { height: var(--ctl-sm, 32px); padding-left: 32px; background: var(--surface-2); border-color: transparent; }
.cb-search:focus { border-color: var(--accent); }
.cb-list { overflow-y: auto; max-height: 360px; padding: var(--s1, 4px) var(--s1, 4px) var(--s2, 8px); overscroll-behavior: contain; outline: none; }

.cb-group { display: flex; flex-direction: column; gap: 1px; padding: var(--s3, 12px) var(--s3, 12px) var(--s1, 4px); position: sticky; top: calc(var(--s1, 4px) * -1); background: var(--surface); z-index: 1; }
.cb-group:first-child { padding-top: var(--s2, 8px); }
.cb-group-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cb-group.tone-private .cb-group-label { color: var(--ok); }
.cb-group.tone-public .cb-group-label { color: var(--warn); }
.cb-group-hint { font-size: .78rem; color: var(--faint, var(--muted)); }

.cb-opt, .cb-section { display: flex; align-items: center; gap: var(--s2, 8px); min-height: 36px; padding: 6px var(--s3, 12px); border-radius: var(--radius-sm, 8px); cursor: pointer; user-select: none; }
.cb-opt.in-section { padding-left: calc(var(--s3, 12px) + 22px); }
.cb-opt.is-nested { padding-left: calc(var(--s3, 12px) + 22px); }
.cb-opt.is-active, .cb-section.is-active { background: var(--surface-2); }
.cb-opt.is-selected { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cb-opt.is-selected.is-active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.cb-opt.is-disabled { cursor: not-allowed; color: var(--faint, var(--muted)); }
.cb-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cb-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-opt.is-selected .cb-opt-label { font-weight: 600; }
.cb-opt-sub { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-opt.is-disabled .cb-opt-sub { color: var(--faint, var(--muted)); }
.cb-opt-icons { display: inline-flex; gap: 2px; color: var(--muted); flex: none; }
.cb-tag { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; font-size: .7rem; }
.cb-tag .cb-ico { width: 14px; height: 14px; }
.cb-star { color: var(--warn); display: inline-flex; flex: none; }
.cb-star .cb-ico { width: 15px; height: 15px; fill: currentColor; }

.cb-actions { display: inline-flex; gap: 2px; flex: none; }
.cb-act { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; opacity: 0; }
.cb-opt:hover .cb-act, .cb-opt.is-active .cb-act, .cb-section:hover .cb-act, .cb-section.is-active .cb-act, .cb-act.is-on, .cb-act:focus-visible { opacity: 1; }
.cb-act:hover { background: var(--surface-3, var(--surface-2)); color: var(--text, inherit); }
.cb-act .cb-ico { width: 14px; height: 14px; }
.cb-act.is-star.is-on { color: var(--warn); }
.cb-act.is-star.is-on .cb-ico { fill: currentColor; }
.cb-panel.sheet .cb-act { opacity: 1; }
.cb-panel.sheet .cb-act { width: 36px; height: 36px; }
@media (hover: none) { .cb-act { opacity: 1; } }
.cb-foot { display: flex; justify-content: flex-end; padding: var(--s2, 8px) var(--s3, 12px); border-top: 1px solid var(--border); font-size: .82rem; }
.cb-group.tone-connected .cb-group-label { color: var(--accent); }
.cb-check { width: 16px; display: inline-flex; flex: none; color: var(--accent); }
.cb-badge { flex: none; }
.cb-section { font-weight: 600; font-size: .92rem; }
.cb-caret { color: var(--muted); transform: rotate(90deg); transition: transform var(--dur, .15s); }
.cb-section.is-collapsed .cb-caret { transform: none; }
.cb-section-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-section-meta { flex: 1; min-width: 0; font-weight: 400; font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-count { margin-left: auto; flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--surface-3, var(--surface-2)); color: var(--muted); font-size: .72rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.cb-empty { padding: var(--s4, 16px); color: var(--muted); text-align: center; font-size: .9rem; }


.cb-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(5, 7, 12, .5); }
.cb-panel.sheet { position: fixed; z-index: 91; left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; max-height: 82vh; border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0); }
.cb-panel.sheet .cb-list { max-height: none; flex: 1; }
.cb-panel.sheet .cb-opt, .cb-panel.sheet .cb-section { min-height: 48px; }
.cb-panel.sheet .cb-search { height: var(--ctl, 38px); font-size: 16px; }
@media (prefers-reduced-motion: no-preference) { .cb-panel.sheet:not([hidden]) { animation: cb-up .18s ease-out; } @keyframes cb-up { from { transform: translateY(24px); opacity: .4; } } }