/* TrioMi Cat Picker – Farben über --tcp-* anpassbar */
.tcp-level { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; animation: tcp-in .28s ease both; animation-delay: calc(var(--tcp-i, 0) * 40ms); }
@keyframes tcp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tcp-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tcp-muted, #8f99a6); }
.tcp-label span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--tcp-panel, #1d2229); color: var(--tcp-accent, #00c4a7); font-size: 11px; }
.tcp-desc { margin: 0; font-size: 12px; color: var(--tcp-muted, #8f99a6); }

.tcp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.tcp-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px 6px 8px; border: 2px solid transparent; border-radius: 12px;
  background: var(--tcp-panel, #1d2229); color: inherit; cursor: pointer; text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; }
.tcp-tile:hover { transform: translateY(-2px); border-color: var(--tcp-line, #2a3039); }
.tcp-tile.on { border-color: var(--tcp-accent, #00c4a7); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tcp-accent, #00c4a7) 25%, transparent); }
.tcp-cover { position: relative; display: block; height: 64px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--tcp-accent, #00c4a7) 22%, transparent), transparent); }
.tcp-cover img { position: absolute; left: 50%; top: 4px; width: 62%; transform: translateX(-50%) rotate(-4deg); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.tcp-tile.on .tcp-cover img { transform: translateX(-50%) rotate(0deg) scale(1.04); transition: transform .25s; }
.tcp-cover i { position: absolute; left: 5px; top: 4px; font-style: normal; font-size: 18px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.tcp-tile b { font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tcp-tile small { font-size: 11px; color: var(--tcp-muted, #8f99a6); }

.tcp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tcp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--tcp-line, #2a3039); border-radius: 99px; background: var(--tcp-panel, #1d2229); color: inherit; cursor: pointer; font-size: 13px; }
.tcp-chip i { font-style: normal; }
.tcp-chip small { font-size: 11px; color: var(--tcp-muted, #8f99a6); }
.tcp-chip.on { border-color: var(--tcp-accent, #00c4a7); background: color-mix(in srgb, var(--tcp-accent, #00c4a7) 16%, var(--tcp-panel, #1d2229)); }

.tcp-select { width: 100%; background: var(--tcp-bg, #0e1013); border: 1px solid var(--tcp-line, #2a3039); border-radius: 9px; padding: 9px 11px; color: inherit; }

.tcp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 12px; font-size: 12px; color: var(--tcp-muted, #8f99a6); }
.tcp-crumbs span { padding: 2px 8px; border-radius: 99px; background: var(--tcp-panel, #1d2229); }
.tcp-crumbs span:last-child { color: var(--tcp-accent, #00c4a7); }
.tcp-crumbs em { font-style: normal; opacity: .6; }