.tcm-panel {
    position: fixed;
    z-index: 1080;
    width: 280px;
    max-height: min(420px, 65vh);
    display: none;
    flex-direction: column;
    background: var(--bs-body-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .18), 0 2px 10px rgba(0, 0, 0, .1);
    border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .08));
    overflow: hidden;
}

.tcm-panel.is-open { display: flex; }

.tcm-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .08));
    flex-shrink: 0;
}

.tcm-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .08) transparent;
}

.tcm-body::-webkit-scrollbar { width: 4px; }
.tcm-body::-webkit-scrollbar-track { background: transparent; }
.tcm-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .08); border-radius: 100px; }
.tcm-body::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .14); }

.tcm-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .08));
    flex-shrink: 0;
}

.tcm-list { display: flex; flex-direction: column; gap: .25rem; }

.tcm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: grab;
    transition: background .15s;
    user-select: none;
}

.tcm-item:hover { background: var(--soft-primary-bg, #f0f4ff); }
.tcm-item.is-dragging { opacity: .35; }
.tcm-item .tcm-grip { color: var(--bs-gray-400); font-size: .75rem; cursor: grab; }
.tcm-item label { font-size: .8rem; cursor: pointer; flex: 1; margin: 0; color: var(--bs-body-color); }
.tcm-item input[type="checkbox"] { width: 1rem; height: 1rem; cursor: pointer; flex-shrink: 0; accent-color: var(--bs-primary); }
.tcm-item input:disabled + label { opacity: .5; cursor: not-allowed; }

.tcm-counter { font-size: .7rem; color: var(--bs-secondary); }

.tcm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1079;
    display: none;
}

.tcm-backdrop.is-open { display: block; }

.tcm-trigger {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    background: #fff;
    color: var(--bs-body-color, #1f2937);
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .12));
    line-height: 1.4;
    transition: background .15s, border-color .15s, color .15s;
    cursor: pointer;
}

.tcm-trigger:hover { background: var(--soft-primary-bg, #f0f4ff); border-color: var(--bs-primary, #0d6efd); color: var(--bs-primary, #0d6efd); }
.tcm-trigger.is-active { background: var(--soft-primary-bg, #eef2ff); border-color: var(--bs-primary, #0d6efd); color: var(--bs-primary, #0d6efd); }
.tcm-trigger i { font-size: .9em; }

[data-theme="dark"] .tcm-trigger {
    background: var(--dark-bg-elevated);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}
[data-theme="dark"] .tcm-trigger:hover {
    background: var(--dark-bg-overlay);
    border-color: var(--bs-primary);
    color: var(--dark-text-primary);
}
[data-theme="dark"] .tcm-trigger.is-active {
    background: var(--dark-bg-overlay);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

[data-theme="dark"] .tcm-panel {
    background: var(--dark-bg-elevated);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 2px 10px rgba(0, 0, 0, .3);
}
[data-theme="dark"] .tcm-header,
[data-theme="dark"] .tcm-footer {
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}
[data-theme="dark"] .tcm-body {
    scrollbar-color: rgba(255, 255, 255, .12) transparent;
}
[data-theme="dark"] .tcm-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); }
[data-theme="dark"] .tcm-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .20); }

[data-theme="dark"] .tcm-item:hover { background: var(--dark-bg-overlay); }
[data-theme="dark"] .tcm-item label { color: var(--dark-text-primary); }
[data-theme="dark"] .tcm-counter { color: var(--dark-text-secondary); }