/* KlipTok v102 · Zoo Sampler (estilos). Usa las variables de kt-v84-inst.css (--border, --btn, --btnh, --accent, --tx, --tx2, --inp). */
.zs{width:100%;display:grid;gap:.9rem}
.zs-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end}
.zs-bar select{padding:.45rem .6rem;border-radius:.6rem;border:1px solid var(--border);background:var(--inp);color:var(--tx);font:inherit}
.zs-bpm{font:700 .8rem system-ui;color:var(--tx2);min-width:4.6rem}
.zs-tracks{display:grid;gap:.5rem}
.zs-tr{border:1px solid var(--border);border-radius:.8rem;padding:.5rem;background:var(--btn);overflow-x:auto}
.zs-tr.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.zs-th{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.4rem;min-width:520px}
.zs-nm{border:0;background:transparent;color:var(--tx);font:800 .9rem system-ui;cursor:pointer;padding:.2rem .5rem;border-radius:.5rem;min-width:8.5rem;text-align:left}
.zs-nm:hover{background:var(--btnh)}
.zs-lb{font:700 .7rem system-ui;color:var(--tx2)}
.zs-pv{font:700 .75rem system-ui;font-style:normal;color:var(--tx2);min-width:1.8rem}
.zs-th input[type=range]{width:5.5rem;accent-color:var(--accent)}
.zs-mini{border:1px solid var(--border);background:var(--btn);color:var(--tx);border-radius:.5rem;min-width:1.9rem;height:1.9rem;font:800 .8rem system-ui;cursor:pointer}
.zs-mini:hover{background:var(--btnh)}.zs-mini.on{background:var(--accent);border-color:var(--accent);color:#fff}
.zs-cells{display:grid;gap:3px;min-width:520px}
.zs-c{height:34px;border-radius:.35rem;border:1px solid var(--border);background:var(--btn);color:#fff;font:800 10px system-ui;cursor:pointer;padding:0}
.zs-c.q{background:var(--btnh)}.zs-c.x{background:var(--accent);border-color:var(--accent)}.zs-c.pl{outline:2px solid #fbbf24;outline-offset:-1px}
.zs-pads{border:1px dashed var(--border);border-radius:.8rem;padding:.6rem;display:grid;gap:.5rem}
.zs-pt{font:700 .8rem system-ui;color:var(--tx2)}
.zs-pg{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.4rem}
.zs-pad{height:64px;border-radius:.7rem;border:1px solid var(--border);background:var(--btn);color:var(--tx);font:800 1.1rem system-ui;cursor:pointer;display:grid;place-items:center;touch-action:none;user-select:none}
.zs-pad small{font:700 .65rem system-ui;color:var(--tx2)}
.zs-pad.on{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(.96)}.zs-pad.on small{color:#fff}
.zs-lib{display:grid;gap:.5rem}
.zs-lh{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.zs-h{margin:0;font-size:1.05rem;flex:1 1 auto}
.zs-lh .ki-btn{display:inline-flex;align-items:center;text-decoration:none}
.zs-tabs,.zs-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.zs-chip{border:1px solid var(--border);background:var(--btn);color:var(--tx);border-radius:999px;padding:.35rem .85rem;font:700 .8rem/1 system-ui;cursor:pointer}
.zs-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.zs-sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.4rem}
.zs-s{display:flex;border:1px solid var(--border);border-radius:.7rem;overflow:hidden;background:var(--btn)}
.zs-sp{flex:1;border:0;background:transparent;color:var(--tx);font:700 .85rem system-ui;text-align:left;padding:.55rem .6rem;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-sp:hover{background:var(--btnh)}
.zs-s{align-items:center;gap:.45rem;padding:.3rem .4rem .3rem .3rem}
/* Play = mismo botón que el reproductor global de KlipTok (círculo con degradado de marca) */
.zs-pl,.ki-play{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:0;padding:0 0 0 2px;display:grid;place-items:center;color:#fff;font:400 13px/1 system-ui;cursor:pointer;background:linear-gradient(135deg,#2563eb,#7c3aed 55%,#ec4899);box-shadow:0 4px 10px rgba(124,58,237,.3);transition:transform .12s,filter .12s}
.zs-pl:hover,.ki-play:hover{filter:brightness(1.1);transform:scale(1.06)}
.zs-pl:active{transform:scale(.94)}
.zs-pl:focus-visible,.zs-sa:focus-visible,.zs-sp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.zs-sp{padding:.35rem .2rem;border-radius:.5rem}
/* Añadir = botón redondo secundario */
.zs-sa{flex:0 0 auto;border:1px solid var(--border);border-radius:50%;background:var(--btn);color:var(--accent);font:800 1.05rem/1 system-ui;width:30px;height:30px;padding:0;cursor:pointer}
.zs-sa:hover{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:760px){.zs-pg{grid-template-columns:repeat(4,minmax(0,1fr))}.zs-pad{height:56px}}

/* v103 · botón principal ▶ Reproducir con el degradado de marca */
.zs-bar .ki-btn.pri{background:linear-gradient(100deg,#2563eb,#7c3aed 55%,#ec4899);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(124,58,237,.3)}
.zs-bar .ki-btn.pri.on{background:#dc2626;box-shadow:none}

/* v104 · Mi sonido (grabar / subir de 1 a 5 s) */
.zs-bar .ki-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.zs-up{border:1px dashed var(--accent);border-radius:.8rem;padding:.7rem;display:grid;gap:.5rem;background:var(--btn)}
.zs-up[hidden],.zs-upr[hidden]{display:none}
.zs-upb,.zs-upr{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.zs-up .ki-btn{display:inline-flex;align-items:center;cursor:pointer}
.zs-up .ki-btn.on{background:#dc2626;border-color:#dc2626;color:#fff}
.zs-up .ki-btn.pri{background:linear-gradient(100deg,#2563eb,#7c3aed 55%,#ec4899);border-color:transparent;color:#fff}
.zs-nin{flex:1 1 10rem;min-width:8rem;padding:.45rem .6rem;border-radius:.6rem;border:1px solid var(--border);background:var(--inp);color:var(--tx);font:inherit}