.zcl{--l:#E6E0F8;--mid:#B9AEE6;--ink:#2A2457;--p:#5B4BD6}
.zcl-tray{display:flex;flex-wrap:wrap;gap:10px;min-height:64px;padding:12px;margin:0 0 16px;background:var(--l);border-radius:16px}
.zcl-card{font:inherit;font-weight:600;font-size:15px;color:var(--ink);background:#fff;border:2px solid var(--mid);border-radius:12px;padding:11px 16px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:0 2px 6px rgba(60,40,120,.14);text-align:left;line-height:1.3;max-width:100%}
.zcl-card:hover{border-color:var(--p)}
.zcl-card.is-picked{border-color:var(--p);box-shadow:0 0 0 3px #CFC6FA}
.zcl-card.is-dragging{opacity:.35}
.zcl-ghost{position:fixed;z-index:99999;pointer-events:none;cursor:grabbing;border-color:var(--p);box-shadow:0 10px 22px rgba(60,40,120,.3)}
.zcl-cats{display:grid;gap:14px}
.zcl-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.zcl-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.zcl-cols-3,.zcl-cols-2{grid-template-columns:1fr}}
.zcl-cat{min-height:170px;padding:12px;background:#fff;border:1px solid #D9D1F5;border-radius:14px;box-shadow:0 2px 6px rgba(60,40,120,.1);transition:background .12s}
.zcl-cat-0{border-top:8px solid #ef4444}.zcl-cat-1{border-top:8px solid #3b82f6}.zcl-cat-2{border-top:8px solid #22c55e}
.zcl-cat.is-over,.zcl.is-picking .zcl-cat:hover{background:#F3F0FC}
.zcl.is-picking .zcl-cat{cursor:pointer;outline:2px dashed var(--mid);outline-offset:-6px}
.zcl-title{font-weight:800;font-family:Manrope,Inter,sans-serif;text-align:center;margin-bottom:10px;color:var(--ink)}
.zcl-drop{display:flex;flex-direction:column;gap:8px;min-height:100px}
.zcl-drop .zcl-card{width:100%}
